如何让网站适应手机和iPad屏幕的尺寸？

我正在一个新的网站上工作，并把设置的宽度放到我的css文件中。我有一个要求，使网站的适应性和可调整大小，以适应手机和各种平板设备的小屏幕。如何让网站适应手机和iPad屏幕的尺寸？

什么在我的CSS样式必须设置，以便该网站最适应其他屏幕尺寸？

2011-10-03 Genadinik

查找到响应式设计正如在回答中得到文件档案化管理。关于这个问题的一个很好的入门知识是http://www.abookapart.com/products/responsive-web-design –

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

@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/

来源

2011-10-03 19:34:46 swatkins

阿好，所以网站本身仍然可以设置为一些静态宽度，对不对？ – Genadinik

这取决于你的方法。通过这种方式，是的，您可以为容器设置一个静态宽度，然后在媒体查询中覆盖该宽度（确保媒体查询最后列出 - 并且顺序相反）。否则，您可以选择“移动优先”路线（http://www.abookapart.com/products/mobile-first），首先定义较小的屏幕，然后再适应较大的屏幕。诀窍是知道什么和什么时候重写，以获得你想要的布局。 jist是你可以改变你的网站以适应任何屏幕（只要浏览器支持媒体查询）。 – swatkins

如何让网站适应手机和iPad屏幕的尺寸？

回答

相关问题