响应式页面的原理、快速构建和适用范围
响应式页面相信大家都不陌生了，在当今的互联网世界几乎随处可见。今天从响应式分布的原理、基础知识、和页面创建以及注意事项等方面探讨，希望大家对响应式页面有个较为全面的把握。
原理
随着显示终端设备的多样化，出现了各种尺寸的屏幕。而传统的网页主要针对桌面电脑而设计和制作的，电脑显示器屏幕虽然也有多个规格，但相对固定，页面内容区的版块宽度一般也设置为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标签来约束视口，其实是控制浏览器如何来渲染网页。代码为：
其中“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
}
意思是对所有的屏幕，当宽度大于等于（最小宽度）为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覆盖默认的样式。
小技巧
当我们在做响应式页面的调试和测试的时候，不需要真的拿所有的真机来测试，如果有是最好。可以采用各种仿真模拟器来检测，准确度还是挺高的。浏览器就有各种常用设备的模拟，以谷歌为例。F12打开调试版，然后点那个手机图标就可以选择对应的设备来模拟了。
注意事项
响应式尽管酷炫省事，也并不是完美无缺。一方面响应式页面可以适应多种设备，但只是页面一样，为了提高移动设备，不可避免需要通过舍弃一些内容来减负。减负其实是迫不得已的做法，用户体验不好，更很难和APP的体验，这对于那种展示型网站或许是一个好的选择，但并不适合所有的网站。即使最终的呈现效果看内容减少了，但是这是在完全加载页面内容之后处理后的结果，也就是对移动端而言，前期浪费了很多时间和流量加载了一些没用的内容。另外一个方面是虽然兼容不同的设备，但是还是同一个有页面，这就会给搜索引擎蜘蛛造成困扰，不利于SEO的推广。
总之，响应式设计有好有坏，关键看什么时候怎么使用。
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20190116A1GR4C00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
