怎么建设响应式页面布局呢？需要注意什么？

响应式页面相信大家都不陌生了，在当今的互联网世界几乎随处可见。今天跟大家分享一下响应式页面布局的原理和基础知识，希望大家对响应式页面有个较为全面的把握。

原理

随着显示终端设备的多样化，出现了各种尺寸的屏幕。而传统的网页主要针对桌面电脑而设计和制作的，电脑显示器屏幕虽然也有多个规格，但相对固定，页面内容区的版块宽度一般也设置为980px。而移动互联网的发展，各种屏幕的手机、pad等出现后，情况变得复杂，但是毕竟移动是趋势，为了给移动端查看网页更好的体验，必须做适合于移动端设备的页面。

那么怎么建设响应式页面布局呢？

一个方法是为不同的设备专门制作对应的网站：当用户访问的时候，还是访问PC的域名，然后识别用户的设备，跳转到对应的专门移动端页面，这也就是很多网站m.域名的由来。另一个方法是，和PC同样的页面，当用户访问的时候，不根据用户的设备类型，而是根据用户的设备的屏幕大小，然后对页面应用与PC端不同的样式，使这个页面在这个设备上看起来像是为移动端专门做的页面，这就是现在流行的响应式页面设计——Responsive Design。

两种方法的优劣显而易见。第一种方法开发、运营、推广各种成本几乎就double了，但可以提供更为专业的移动端体验，所以说，除非这个网站盈利够大，要求很高，而且主要是有钱，可以这么干。第二种方法就是两个字——省事，就是编写一个页面，适应所有设备。

下面开始介绍这种省事又酷炫的方法。

基础

meta标签设置视口（viewport）

首先说说viewport，也就是移动开发中经常提及的viewport，当然移动设备的viewport还涉及到物理像素和逻辑像素的问题，在此不做更深的讨论。总之，这个viewport是指网页浏览器（不管是PC还是移动端）中呈现网页的区域，站在用户的角度来说，就是用户能看到的地方。正常来说，这个视口的宽度和设备宽度（屏幕宽度）是一样的，但也有例外，比如当你缩放拖拽浏览器的时候，视口也会随之变化（这也是个检查页面是响应式效果的小窍门）。

视口的宽度获取是响应式设计的基础，响应式页面的响应也就是响应视口宽度的变化。那该如何准确获取视口宽度呢？

两种思路。

一种是用JS获取并且修改CSS。但这种方法除了有js无法使用的风险，更主要的是结果并不是我们想要的。通过document.documentElement.clientWidth获得的设备宽度是厂家设置的宽度（也就是竖屏时候的宽度），也就是当横屏的时候，js获取的还是原来的宽度，这就是实际情况不符了。

另外一种方式是通过设置HTML meta标签来约束视口，其实是控制浏览器如何来渲染网页。代码为：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

其中“width=device-width”设置视口为设备宽度，“initial-scale=1.0”设置初始化的视口大小是1.0倍

“maximum-scale=1.0”规定允许放大的最大倍数是1倍，“user-scalable=no ”不允许缩放视口，这样保证了与设备显示宽度一致。

CSS媒体查询（Media Query）

CSS媒体查询是响应式页面的核心所在，主要功能是对不同的宽度做出不同的CSS动作（响应），并将这种动作告知浏览器。媒体查询的语法是@Media 和 and操作符，分别查询设备类型和设备属性。比如

@media screen and (min-width:900px){

body{background-color:blue}

}

意思是对所有的屏幕，当宽度大于等于（最小宽度）为900px的时候，应有此样式。比如设备宽度为980px的时候，body的背景颜色设置为蓝色。

同样，可以用and连接多个条件，做地更细化。

@media screen and (min-width:600px) and (max-width:900px){

p{ color:red}

}

意思是对所有的屏幕，当宽度大于在600和900像素之间（包含），将P标签内容的颜色设置为红色。

需要注意的是，IE一些低版本的浏览器如IE6、7、8是不支持媒体查询的，尽管已经很古老，但还是要避免，所以需要先写一个基础的CSS，一些特殊的需要变化的CSS代码则可以在媒体查询里。

创建

有了以上的基础，我们结合流式布局和栅栏布局概念，就可以自己开着手开发响应式页面，当然也可以利用其它现有的工具来提高开发速度。

目前主流前端UI框架都是响应式的，比如Bootstrap、jquery UI、dojo等。下面以Bootstrap为例，师范如何快速创建一个响应式页面。

先到bootstrap官网下载响应的文件，或者你可以用线上的，不过还是建议下载到本地。

注意可以把css和js文件路劲换成本地路径（相对路径），其中bootstrap.min.css和bootstrap.min.js是Bootstrap的核心文件，而bootstrap.min.js是依赖于JQ的，所以，JQ必须在bootstrap.min.js之前加载。这样，你就结合Bootstrap的栅格系统和各种组件搭建自己的响应式页面了，另外，如果你觉得Bootstrap的样式不好看，你可以借助媒体查询，在bootstrap.min.js之后引入自己的自定义css覆盖默认的样式。