iphone - 如何使网站适应手机和 iPad 屏幕的大小？

Question

我正在开发一个新网站，并在我的 css 文件中设置了宽度。我需要使网站具有适应性和可调整大小以适应手机和各种平板设备的较小屏幕。

必须设置我的 CSS 样式中的哪些内容才能使网站最好地适应其他屏幕尺寸？

Answer 1

您将需要使用媒体查询。这是响应式设计背后的全部基础。

@media only screen and (max-device-width: 480px) {
    /* write smartphone styles here */
}

@media only screen and (max-device-width: 768px) {
    /* tablets in portrait mode */
}

@media only screen and (max-device-width: 1024px) {
    /* tablets in landscape mode and smaller/older monitors */
}

看这里: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/