我们想要及时地获取信息，而随着各种形状和尺寸的移动设备的剧增，万维网可以出现在你的口袋里、钱包里、背包里，就像它在书桌、餐桌和卧室一样方便。
现在，网站的建设者需要让访问者能够通过移动电话、智能手机、平板电脑、笔记本电脑、台式机、游戏机、电视机以及未来任何可以上网的设备获取信息。响应式 Web设计就是为此诞生的。
以前，为了满足移动用户的需求，需要额外建立一个专门为移动设备设计的网站。不久之前这种做法还比较流行，但是目前已经越来越少见了。不过，现在也还有一些公司在这样做。有的还为平板电脑建立了第三个网站。
不存在可以适应所有情形的某种正确方法。每周都有新的设备投放到市场上，而且毋庸置疑的是，各家公司都在设计新的设备类型。那么，构建和维护多个网站现实吗？甚至说，有必要吗？我们无法预知未来的情形。
幸好，我们有办法构建一个既可以运行在现在的设备，也可以运行在未来设备上的网站。更棒的是，可以让它在较小的屏幕、较大的屏幕以及介于两者之间的屏幕上显示不同的效果。
构建响应式页面的方法植根于以下三点。
灵活的图像和媒体。图像和媒体资源的尺寸是用百分数定义的，从而可以根据环境进行缩放。
� 灵活的、基于网格的布局，也就是流式布局。对于响应式网站，所有的width 属性都用百分数设定，因此所有的布局成分都是相对的。其他水平属性通常也会使用相对单位（em、百分数和 rem 等）。
媒体查询。使用这项技术，可以根据媒体特征（如浏览器可视页面区域的宽度）对设计进行调整。
以下详细介绍：
创建弹性布局的步骤
对于需要某个宽度实现预期布局的元素，设 置 width: percentage; ， 其 中 percentage表示你希望元素在水平方向上占据容器空间
的比例。通常说来，不必设置 width: 100%; ，因为默认设置为 display:block; 的元素（如 p 以及其他很多元素）或手动设置为 display: block; 的元素在默认情况下会占据整个可用空间。
作为可选的一步，对包含整个页面内容的元素设置 max-width: value; ，其中 value表示你希望页面最多可增长到的最大宽度 。通常，value 以像素为单位，不过也可以使用百分数、em 值或其他单位的值。
理解和实现媒体查询
媒体查询增强了媒体类型方法，允许根据特定的设备特性定位样式。
要调整网站的呈现样式，让其适应不同的屏幕尺寸，采用媒体查询特别方便。下面列出了可以包含在媒体查询里的媒体特性。
� width （宽度）
� height （高度）
� device-width （设备宽度）
� device-height （设备高度）
� orientation （方向）
aspect-ratio （高宽比）
� device-aspect-ratio （设备高宽比）
� color （颜色）
� color-index （颜色数）
� monochrome （单色）
� resolution （分辨率）
� scan （扫描）
� grid （栅格）
还有一些非标准的媒体特性，如
� -webkit-device-pixel-ratio （WebKit设备像素比）
� -moz-device-pixel-ratio （Mozilla设备像素比）
除 了 orientation 、 scan 和 grid 以 外，上述属性均可添加 min- 和 max- 前缀。 min-前缀定位的是“大于等于”对应值的目标，而 max- 前缀定位的则是“小于等于”对应值的目标。
min-width 和max-width是制作响应式页面时反复用到的两个媒体特性。现代桌面浏览器和移动电话浏览器对媒体查询的支持程度很高。不过，InternetExplorer 8 及以下版本并不支持媒体查询。
以下是媒体查询的基本语法。
//指向外部样式表的链接：
<link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />
// 位于样式表中的媒体查询：
@media logic type and (feature:value) {
/* 目标 CSS 样式规则写在这里 */
}
<head>
<meta charset="utf-8" />
<title>Media query in link</title>
<meta name="viewport" content="width=
device-width, initial-scale=1.0" />
<link rel="stylesheet" href="base.css"
media="all" />
<!--
The logic is only.
The type is screen.
The feature: value is min-width: 480px.
-->
<link rel="stylesheet" media="only
screen and (min-width: 480px)"
href="styles-480.css" />
</head>
base.css中的样式用于所有的输出设备。styles-480.css 中的样式则仅用于支持媒体查询且视觉区域宽度不低于 480 像素的浏览器。
/* 常规样式写在这里。
每个设备都能获取它们，
除非被媒体查询中的样式规则覆盖 */
body {
font: 200%/1.3 sans-serif;
}
p {
color: green;
}
/*
The logic is only.
The type is screen.
The feature: value is min-width: 480px.
*/
@media only screen and (min-width:480px) {
p {
color: red;
font-weight: bold;
}
}
通过媒体查询，可以根据设备的媒体属性应用不同的样式。尽管媒体查询包含了很多功能，但其中 min-width 和 max-width 是创建响应式网页时用的最多的。
<link rel="stylesheet" media="only screen and (min-width: 480px) and(max-width:767px)" href="styles.css" />
<link rel="stylesheet" media="only screen and (orientation: landscape)" href="styles.css" />
<link rel="stylesheet" media="only print and (color)" href="color-pages.css" />
<link rel="stylesheet" media="only print and (monochrome)" href="monochrome- pages.css" />
<link rel="stylesheet" media="only screen and (color), projection and (color)" href="styles.css" />
</head>
<body>
//这些媒体查询与上图中的是相同的，只是直接出现在样式表中
/* 基准样式
---------------------------------------- */
/* 针对所有设备的基准样式 */
...
/* 开始媒体查询
---------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* 样式规则 */
}
@media only screen and (orientation: landscape) {
/* 样式规则 */
}
@media only print and (color) {
/* 样式规则 */
}
@media only print and (monochrome) {
/* 样式规则 */
}
@media only screen and (color), projection and (color) {
/* 样式规则 */
}
理解视觉区域及使用视觉区域 meta 元素
视觉区域（viewport）指的是浏览器（包括桌面浏览器和移动浏览器）显示页面的区域。它不包含浏览器地址栏、按钮这样的东西，只是浏览区域。媒体查询的 width 特性对应的是视觉区域的宽度。不过， device-width 特性不是，它指的是屏幕的宽度。
在移动设备（如iPhone）上，默认情况下这两个值通常不一样。Mobile Safari （iPhone的浏览器）的视觉区域默认为 980 像素宽，但 iPhone 的屏幕只有 320 像素宽（iPhone 的 Retina 显示屏的屏幕分辨率有640像素宽，但它们是在相同的空间挤入两倍的像素，因此设备宽度仍为320像素）。
因此，iPhone 会像设为 980 像素宽的桌面浏览器那样显示页面，并将页面缩小以适应320 像素的屏幕宽度（在纵向模式下）。结果，当你在 Mobile Safari 中浏览大部分为桌面浏览器建立的网站时，会显示将这些网站缩小了的样子。在横向模式下也是这样处理的，只不过宽度为 480 像素（iPhone5 是 568 像素）。如果不进行放大，页面通常是难以阅读的（注意不同设备的默认视觉区域宽度并不相同）。
测试页面包含一个 320 像素×480 像素的绿色 div 。Mobile Safari 的视觉区域默认为 980 像素宽，因此 iPhone 会将该 div 缩小，以在 320 像素宽的屏幕内显示它。这就是这个绿色盒子大约占据屏幕宽度的三分之一（即320/980）的缘故。
幸好，有一种快速解决方案。在页面的 head 部分添加视觉区域 meta 元素即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Your page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
...
</head>
<body>
这段代码的重点是 width=device-width 。有了这条语句，视觉区域的宽度会被设成与设备宽度（对 iPhone 来说为 320 像素）相同的值，因此在纵向模式下该宽度的页面内容会填充整个屏幕。如果不包含这一语句，使用媒体查询的 min-width 和 max-width 特性将不会得到预期的结果。
代码中的 initial-scale=1. 部分对 width 和 device-width 值没有影响，但通常会包含这一语句。它将页面的默认缩放级别设成了 100%，换成纵向模式也一样。（意，iOS6 之前的版本有一个 bug，它会裁掉一部分内容，参见http://adactio.com/journal/5802/。）如果不设置 initial-scale=1 ，在 iPhone 中，手机从纵向模式改为横向模式时，网页会被放大，从而让布局与纵向模式的一致。
//兼容ie8/9
<head>
...
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/styles.css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/old-ie.css" />
<![endif]-->
</head>
网友评论