如何让网站适应手机和 iPad 屏幕的大小？答案

【问题标题】：How to make a site adapt to sizes of phone and iPad screens?如何让网站适应手机和 iPad 屏幕的大小？
【发布时间】：2011-10-03 19:29:08
【问题描述】：

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

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

【问题讨论】：

查看响应式设计，正如答案中提到的那样。关于这个主题的一个很好的入门是abookapart.com/products/responsive-web-design

标签： iphone html css ipad

【解决方案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/

【讨论】：

啊，好吧，所以网站本身仍然可以设置为一些静态宽度，对吧？
这取决于您的方法。这样，是的，您可以为容器设置静态宽度，然后在媒体查询中覆盖该宽度（确保媒体查询最后列出 - 并且以相反的顺序）。否则，您可以走“移动优先”路线（abookapart.com/products/mobile-first），先定义小屏幕，然后适应大屏幕。诀窍是知道覆盖什么以及何时覆盖以获得您想要的布局。要点是您可以更改您的网站以适应任何屏幕（只要浏览器支持媒体查询）。