8.1 小设备上的大布局

我们在这里以iPad和iPhone作为目标设备，但背后的概念同样适用于其他平板电脑和智能手机。首先，让我们在小屏幕上看一看第7章的页面（固定宽度980像素布局）。

iPad屏幕尺寸是1024×768像素，由于页面布局宽度为980像素，因而在横向（水平）的时候恰好能容纳布局（见图8-1）。当把iPad竖过来（垂直）以后，页面布局就放不开了。

iPad和iPhone屏幕及其界面组件的大小，详见这里：http://upstageapp.com/resources。

图8-1 在iPad横屏的时候，第7章的网页看起来很舒服，而且能填满屏幕；在iPad竖屏的时候，页面看起来小了一号，也没有填满屏幕

好了，再看看通过iPhone查看这个页面会怎么样，见图8-2。

图8-2 在iPhone横屏的时候，页面能填满屏幕，但已经小得几乎看不清文字了；在竖屏的时候，页面就更小了

如你所见，iPad和iPhone会自动缩小页面以填满屏幕，但页面布局在iPhone的小屏幕上根本没法看。特别是文字太小了。用户必须通过扩展手势来放大页面，以便看清文字。只是这样一来，每次都只能看到屏幕中的一小块地方。在竖屏的时候，也就是用户自然而然地把握手机的情况下，页面还会更小。

很明显，一种布局不能适应多种屏幕尺寸。我们需要一种能够检测屏幕大小的方法，然后相应地修改布局。简言之，就是需要让页面能够自己响应屏幕变化。下面我们就来看一看实现这一点需要哪些技术。首先就是媒体查询。

响应式设计的要素

响应式设计包含三个重要的方面。

• 媒体查询：是一种CSS语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS规则；
• 流式布局：是使用em或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放；
• 弹性图片：是使用相对单位确保图片再大也不会超过其容器。

这几个方面最早是由Ethan Marcotte提出来的，发表在2010年5月份的A List Apart杂志上，地址是：http://www.alistapart.com/articles/responsive-web-design。