如何使网站适应手机和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/