今天的网页布局必须能根据它自己所处的不同环境作出响应。大屏幕上的最佳体验和手机中的最佳体验有着天壤之别。在大屏幕上，可能使用多栏布局效果很 不错，但多栏布局到了手机上，每一栏都会窄得没法看。此时，所有内容“鱼贯而行”，即用一个栏来组织成了唯一可行的方案。这样，用户使用简单的扫屏手势， 就可以轻松自如地滚动屏幕来阅读了。
实际上，使用一项叫媒体查询的CSS功能，很容易检测出用户设备的屏幕大小。然后，据以提供替代或额外的CSS，可针对相应屏幕实现更加优化的体验。使用这种方式创建对设备有感知力的网站，被称为响应式设计。
小设备上的大布局
我们在这里以iPad和iPhone作为目标设备，但背后的概念同样适用于其他平板电脑和智能手机。首先，让我们在小屏幕上看一看第7章的页面（固定宽度980像素布局）。
iPad屏幕尺寸是1024×768像素，由于页面布局宽度为980像素，因而在横向（水平）的时候恰好能容纳布局。当把iPad竖过来（垂直）以后，页面布局就放不开了。
iPad 和iPhone会自动缩小页面以填满屏幕，但页面布局在iPhone的小屏幕上根本没法看。特别是文字太小了。用户必须通过扩展手势来放大页面，以便看清 文字。只是这样一来，每次都只能看到屏幕中的一小块地方。在竖屏的时候，也就是用户自然而然地把握手机的情况下，页面还会更小。
很明显，一种布局不能适应多种屏幕尺寸。我们需要一种能够检测屏幕大小的方法，然后相应地修改布局。简言之，就是需要让页面能够自己响应屏幕变化。下面我们就来看一看实现这一点需要哪些技术。首先就是媒体查询。
响应式设计的要素
响应式设计包含三个重要的方面。
- 媒体查询：是一种CSS语法，可以根据浏览器的特性，一般是屏幕或浏览器容器宽度提供CSS规则；
- 流式布局：是使用em或百分比等相对单位设定页面总体宽度，让布局能够随屏幕大小而缩放；
- 弹性图片：是使用相对单位确保图片再大也不会超过其容器。
@media规则
第一种方式是@media规则，可以在样式表或<style>标签的CSS中包含媒体查询，比如：
@media print {
nav {
display:none;
}
}
这条规则声明：如果当前页面要打印，那么就不显示nav元素。
大家注意，这里是把CSS规则嵌套在了一个@media规则中，乍一看似乎有点不太习惯。尽管可以把CSS规则嵌套在媒体查询里，但媒体查询本身却不能互相嵌套。下面再看一个假设的示例（倒是跟图8-1和图8-2中的例子关系更密切），其中涉及最大屏幕宽度。
/*只在屏幕宽度不大于568像素时应用*/
@media screen and (max-width:568px) {
.column {float:none; width:96%; margin:0 auto;}
}
对这个例子而言，如果页面是通过屏幕显示，而且该屏幕宽度不超过568像素，那么CSS就会取消带.column类的元素的浮动，让布局区块上下堆叠，且让该元素宽度为屏幕的96%，同时在屏幕上居中。
[img src="file:///C:\DOCUME~1\baiyz\LOCALS~1\Temp\ksohtml\wps_clip_image-19240.png" height="41" width="38">的 屏幕分辨率为320×480，而iPhone 5的屏幕分辨率则为320×568（至少对浏览器和媒体查询来说是这么大，因为像素是翻倍使用的——物理像 素在两个方向上都是这里值的两倍）。把max-width设定为较大的iPhone 5屏幕的最大宽度，可以保证布局各栏在所有iPhone中都不再浮 动，而是上下堆叠。
简单地理解，就是相应设备必须是一块最大屏幕宽度不超过568像素的屏幕（比如浏览器或智能手机）。因此，这条规则就不会应用给1024×768像素的iPad。
下面我们再看一看如何在<link>标签的media属性里写媒体查询。
<link>标签的media属性
如 果要通过媒体查询应用的CSS规则非常多，那么就可以考虑使用<link>标签的media属性设定条件，有选择地加载独立的样式表。你不会 不知道吧，我们前面一直都是在使用<link>标签向HTML中链接样式表的。嗯，这个你应该知道。不过，你未必知道的是，通过 在<link>标签的media属性中指定条件，可以有选择地加载样式表。
下面这个例子在前面介绍@media规则时展示过，但这次我们使用的是<link>标签的media属性。
<link type="text/css" media="print" href="css/print_styles.css" />
<link type="text/css" media="screen and (max-width:568px)" href="css/iphone_styles.css" />
[img src="file:///C:\DOCUME~1\baiyz\LOCALS~1\Temp\ksohtml\wps_clip_image-19367.png" height="41" width="38">CSS 样式表会根据media属性中的指定的条件应用。而且，查看页面的如果是大显示器或iPad，则浏览器根本不会加载上面例子中的第二个样式表。第二个样式 表只会被查看该页面的智能手机加载。那怎么使用媒体查询最直观呢？最直观的方式莫过于根据不同的断点来编写媒体查询。
断点
断点（breakpoint）在这里指的是媒体查询起作用的屏幕宽度，其写法类似如下形式。
@media screen and (max-width:640px) { /*CSS规则*/ }
在这里，断点是640像素宽。如果有设备的屏幕宽度等于或小于断点设定的宽度，那么后面的CSS就会起作用。
可 能有人会使用断点去匹配特定设备的屏幕宽度，但我认为最重要的，还是在屏幕变小的情况下，通过简化布局来确保可用性。换句话说，不要简单地用断点去匹配设 备宽度，而是可以从慢慢地缩小浏览器窗口开始，在发现当前布局不合适的时候再确定断点，然后编写新样式。不要针对某款具体的设备，而要为宽度在某个范围内 的屏幕提供替代的布局，该布局对于范围内的设备都应该适用。
通过缩小浏览器窗口，能够直观地感受到当前布局在小屏幕上的效果。不过，毋庸置 疑，必须还要在小屏幕设备上进行测试。平板电脑与小显示器尺寸接近，因此1000像素的断点（为屏幕小于等于1000像素的设备提供样式）适合平板电脑。 在这样做之前，我们先讲一讲怎么取消iPhone和iPad中“缩小适应”的默认行为。
用<meta>标签设定视口
iPad 和iPhone会把适合大屏幕的网页缩小，以便在它们较小的屏幕上能看到网页的全貌。这是一个通用技巧，但对于手机——特别是iPhone来说，由于文字 实在太小了，为了看清楚网页内容，肯定得用扩展手势放大页面，然后再来来回回地扫屏。如果你想让自己的页面布局适合这些小屏幕，首先就要覆盖这种自动缩小 的设定。方法是在页面的<head>标签里添加一个<meta>标签：
<meta name="viewport" content="width=device-width; maximumscale=1.0" />
[img src="file:///C:\DOCUME~1\baiyz\LOCALS~1\Temp\ksohtml\wps_clip_image-19762.png" height="41" width="38"><meta>标签告诉浏览器按照屏幕宽度来显示网页，不要缩小网页。虽然这样可以让布局以实际宽度显示，但在iOS设备（如iPad和iPhone）中却会引发一个已知的bug。关于这个bug及如何解决，本章后面再交待。
针对平板优化布局
在iPad竖屏状态下，布局中的区块交叠到了一起
随着布局宽度变窄——这里是在iPad竖屏，即768像素宽度的情况下，导航菜单已经压在了其左侧的页面标题上面。而中间的登录表单和博文链接也都盖住了部分博文内容。显然，菜单的定位方式及页眉下方的两栏布局不适合这么窄的屏幕。
那好，这就是我们在1000像素断点中需要解决的问题。还是先来看一看断点中的CSS规则，之后再听我解释。
@media only screen and (max-width:1000px) { /*1000像素的断点*/
body {
margin:0 8px 20px; /*添加右外边距，以防滚动条碍事儿*/
}
#wrapper {width:98%;} /*布局由固定变成流动*/
header {
height:100px; /*增加页眉高度，为重新定位菜单留出空间*/
padding:1px 0 0 0; /*防止导航菜单的上外边距叠加*/
}
header nav.menu {
margin-top:65px; /*把菜单移动到页面标题和搜索框下方 */
}
section#feature_area {padding-bottom:0;} /*用不着了*/
section#feature_area article { /*让博文摘要部分与布局同宽*/
float:none; /*不需要浮动了*/
width:auto;/*自动填满布局*/
}
section#feature_area aside { /*原来的右栏同样与布局同宽*/
float:none;
width:auto;
}
section#feature_area aside form {
float:left; /*浮动到左侧*/
margin:15px 0 0 0; /*与nav的上外边距一致*/
}
section#feature_area aside nav {
width:17em; /*缩小博文链接区的宽度*/
}
} /*1000像素断点结束*/
下图展示了应用以上断点规则后，通过iPad竖屏模式浏览页面会看到不一样的效果。iPad横屏时的宽度大于1000像素，因此不会应用以上规则，仍然是图8-1中的样子，而在竖屏时由于宽度小于1000像素，所以就会得到新的流动布局。
通过媒体查询应用新规则之后，页眉高度和菜单上外边距都增加了。这些变化让菜单移到了页眉底部新增的空间，它现在位于标题和搜索框之下了。
feature_area 也不一样了，它的两个子元素——包含博文摘要的article和包含登录表单及博文链接的aside被取消了浮动并将宽度重设为auto。它们由左右并列 变成了上下堆叠，并分别填满布局宽度。在aside内部，表单向左浮动，因而form和nav并列在一起，共同位于article元素下方（nav本来就 是向右浮动的）。另外，为了在布局宽度缩小到下一个断点（640像素）之前，不让nav元素碰到表单的右边，我们还把nav元素稍微设定得窄了一些。（下 一个断点的情况稍后介绍。）
此时，还不需要对book_area写什么新样式，因为一开始我们就给每本书的容器都设定了25%的宽度，并没有设定固定的宽度。所以，这些图书封面及各自相应的文字只会随着布局变窄而靠得更近。
在iPad或其他窗口宽度小于1000像素的非移动浏览器中，这种布局会给人更好的阅读体验。好啦，接下来再看一看如果布局宽度进一步变窄又会如何。
feature_area 也不一样了，它的两个子元素——包含博文摘要的article和包含登录表单及博文链接的aside被取消了浮动并将宽度重设为auto。它们由左右并列 变成了上下堆叠，并分别填满布局宽度。在aside内部，表单向左浮动，因而form和nav并列在一起，共同位于article元素下方（nav本来就 是向右浮动的）。另外，为了在布局宽度缩小到下一个断点（640像素）之前，不让nav元素碰到表单的右边，我们还把nav元素稍微设定得窄了一些。（下 一个断点的情况稍后介绍。）
此时，还不需要对book_area写什么新样式，因为一开始我们就给每本书的容器都设定了25%的宽度，并没有设定固定的宽度。所以，这些图书封面及各自相应的文字只会随着布局变窄而靠得更近。
在iPad或其他窗口宽度小于1000像素的非移动浏览器中，这种布局会给人更好的阅读体验。
本文节选自《CSS设计指南》（第3版），作者Charles Wyke-Smith，李松峰译，人民邮电出版社出版发行。
