「~一套代码，三屏齐发~」
作为一个前端开发者，响应式网站开发是必备技能之一。所谓响应式开发，就是指在不同的系统，设备环境，不同的分辨率下，界面进行不同的响应和调整适配。
响应式定义
响应式布局相当于在三个终端：电脑、手机、平板（兼容多个终端），浏览统一网站，并都能完美显示，使用户体验到更加舒适的界面。
响应式网页设计（Responsiveweb design）是基于CSS3的媒介查询（MediaQuery）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。响应式设计要以“内容优先”为原则。主要目标要让网站不仅要对用户有限的视口做出响应，还要以最快的时间加载网页。
响应式的特点：
▶优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题。
▶缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长。
响应式与自适应区别
响应式布局
指一个网站能够兼容多个终端，可以根据屏幕的大小自动调整页面的的展示方式以及布局，我们不用为每一个终端做一个特定的版本。
响应式网站的几个标志：
1、同时适配PC + 平板 + 手机等；
2、标签导航在接近手持终端设备时改变为经典的抽屉式导航；
3、网站的布局会根据视口来调整模块的大小和位置；
自适应布局
指网页能够在不同大小的终端设备上自行适应显示，也就是让一个网站在不同大小的设备上显示同一样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动缩放。
自适应布局的几个标志：
1、大多只是适配单个终端的主流N个主流视口；
2、当视口大小低于设置的最小视口时，界面会出现显示不全，并且出现横向滑动条；
3、总体框架不变，横线布局的版块太多会有所减少。
综上所述，在开发的时候，要从实际的项目出发。
采用响应式布局：对于内容较少、主要为展示类网站。
采用自适应布局：对于内容多，布局较为复杂的情况，管理类的网站采用分开开发的方式。
布局单位
熟悉常用的布局单位还是很重要的，常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。
像素
百分比
em和rem
vw/vh
vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。
响应式开发要素
上面的思维导图是我在工作过程中总结的响应式开发的要素：
1、流式布局：以百分比布局方式的弹性界面，用媒体查询来限制元素的变动范围；
2、弹性图片：根据不同设备，图片大小进行变化。img { max-width: 100%;}；
3、媒体查询：根据设备的各种功能特性来设定相应的样式；
4、重置样式：用来覆盖不同浏览器渲染HTML元素时的各种默认样式；
5、视口和屏幕：(视口viewport）
视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等；
屏幕尺寸指的是设备的物理显示区域；
6、html5shiv主要解决HTML5提出的新的元素不被IE6-IE8识别；
7、使用media-queries.js或者respond.js来为IE添加Media Query支持。
响应式开发常用要点
iOS和android浏览器基于webkit核心。
▶要点一：网页代码的头部
<metaname="viewport" content="width=device-width,initial-scale=1" />viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
▶要点二：用以声明当前页面用chrome内核来渲染
<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">▶要点三：针对IE浏览器比较好的解决方案是html5shiv
html5shiv主要解决HTML5提出的新的元素不被IE6-8识别
html5shiv的使用非常的简单，考虑到IE9是支持html5
<!--[ifltIE9]><scripttype="text/javascript" src="scripts/html5shiv.min.js"></script><![endif]--> ▶要点四：CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询
IE8或者更早的浏览器并不支持MediaQuery。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--><!--[ifltIE9]>
<scripttype="text/javascript"src="scripts/respond.min.js"></script>
<![endif]-->▶要点五：不使用绝对宽度
网页会根据屏幕宽度调整布局
width: xx%;或者width:auto;▶要点六：字体相对大小
字体也不能使用绝对大小（px），而只能使用相对大小（em或rem）。
▶要点七：流动布局
各个区块的位置都是浮动的，不是固定不变的。
绝对定位（position:absolute）的使用，也要非常小心。
▶要点八：选择加载CSS
"自适应网页设计"的核心，就是CSS3引入的Media Query模块。
▶要点九：CSS的@media规则
根据不同的屏幕分辨率，选择应用不同的CSS规则
▶要点十：图片的自适应
img { max-width:100%;}
老版本的IE不支持max-width，所以只好写成：img { width: 100%; }
我们可以通过改变浏览器窗口大小就可以完成大多数测试：
1、chrome浏览器：F12 device mode 进行不同设置调试
2、firefox浏览器：开发者 响应式设计视图
在线测试工具：
http://mattkersley.com/responsive/
注意事项
1、固定像素值要少；
2、用padding,margin调整距离；
3、用百分比调整；
4、不同设备适配要考虑代码量；
5、灵活性。
设计页面尺寸
开发响应式页面需要提供三个设计稿件尺寸分别是：640px、960px、1200px。
性能优化
1、图片无损压缩：
通过http://tinypng.org/ 可以通过该网站在线让图片无损压缩
2、在线性能优化：
pagespeed是来自Google的一个工具，可以帮助你分析web页面并且告诉你如何优化来提高效率。当然，你可以作为chrome的扩展来使用。
Google官方网页载入速度检测工具PageSpeed Insights ：
http://developers.google.com/speed/pagespeed/insights/
YSLOW是Firefox浏览器的扩展插件，和pagespeed类似，拥有页面评分和等级，并且会提供一些相关推荐和解决方案。
觉得本文对你有帮助？请分享给更多人
关注「前端学苑」加星标，提升前端技能
