响应式web设计

浏览数：27 / 时间：2015年06月09日

　　响应式网页设计是时下网页设计领域最热门的话题之一，该概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出，其目标是要让设计的网站能够响应用户的行为，根据不同终端设备自动调整尺寸。简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

　　那么，怎么实现响应式设计呢？对于这个问题，我们可以通过CSS3中的Media Query来实现，即媒体查询。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

1 Media Query（媒体查询）

　　媒体查询由媒体类型和一个或多个监测媒体特性的条件表达式组成。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。没有CSS3的媒体查询，就不能针对设备特性设定特定的CSS样式。

　　可以在HTML页面的<head>标签中插入<link>标签链接CSS文件时进行媒体查询，还可以在CSS样式表中使用媒体查询。

1.1 首先我们要允许网页宽度自动调整

在网页代码的头部，加入一行viewport元标签：

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

1.2 语法结构

通过Media Query我们可以得到不同设备屏幕的宽和高，从而我们就可以分别处理了。Media Query语法规则如下：

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

根据不同的设备屏幕宽度，设置不同的CSS。那么这里有两种方法：

1.2.1 外联样式表

　　在这里我们可以根据不同的设备载入不同的CSS样式表。

　　（1）当页面宽度大于等于960px时，载入样式表gt-960px.css

　　（2）当页面宽度大于等于600px且小于等于960px时，载入样式表600px-960px.css

　　（3）当页面宽度小于等于600px时，载入样式表600px.css

1.2.2 样式表中内嵌法

　　首先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子：

/* 当浏览器的可视区域小于980px */

@media screen and （max-width： 980px） {

#wrap {width： 90%; margin:0 auto;}

#content {width： 60%;padding： 5%;}

#sidebar {width： 30%;}

#footer {padding： 8% 5%;margin-bottom： 10px;}

}

/* 当浏览器的可视区域小于650px */

@media screen and （max-width： 650px） {

#header {height： auto;}

#searchform {position： absolute;top： 5px;right： 0;}

#content {width： auto; float： none; margin： 20px 0;}

#sidebar {width： 100%; float： none; margin： 0;}

}

通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化，当然你可以再多设置几个尺寸的监测层叠样式表，这样子就可以根据不同尺寸设备来进行响应式的布局。

请注意，在样式表中设置宽度时，尽量避免使用绝对宽度，如”width:400px;“，严谨来说，这是不够规范的。如果想完全响应式布局的话，就不能使用固定的宽度了，可以设为自动或百分比，如”width:auto;“或”width:xx%;“，另外字体也要设为百分比。

1.5 弹性图片和视频

1.5.1 弹性图片

我们需要为图片设置max-width: 100%和height: auto，来实现其弹性化。

img {

max-width : 100%;

height: auto;

width: auto9; /* ie8 */

}

1.5.2 弹性视频

同样，对于视频我们也需要做max-width: 100%的设置；但是Safari对embed的该属性支持不是很好，但我们可以用width: 100%来代替

.video embed,

.video object,

.video iframe {

width: 100%;

height: auto;

}

2 流式布局

那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑渐变。当某个视口处于媒体查询设置的固定宽度范围之外（可能是某种未知的未来设备及视口），网页就需要水平滚动才能完整浏览。因此为了展现灵活的设计，在所有视口中都完美显示，需要将固定像素布局转换成灵活的百分比布局。

关于流式布局，我从网络上查到有两种方式：一种是固定一侧，让另一侧自适应;另一种是两侧都自适应，按比例同时放大和缩小。

（1）采用负边距布局的思路，固定一边的宽度，自适应另一边，然后所有的单位还是用px，不同的主流分辨率分支下，可能设置不同的尺寸，但一定是用px做单位的。

（2）关于两侧都自适应的方式，《响应式Web设计 HTML5和CSS3实战》中提到一个公式：

目标像素宽度 / 上下文元素宽度 = 百分比宽度

作者的思路是从最外层逐渐向内应用该公式将固定像素转换成百分比形式。但看到所有单位都要经过一个除法之后才能得到最终结果值，而这结果值还是类似“margin-right:2.6595745%;”以后布局时，为了得到如此精确地结果，需要多一步计算，个人感觉比较麻烦。