“一套代码，三屏齐发”——响应式开发浅析

响应式开发

响应式是什么? 它能帮我们做些什么? 我们该怎么应用？它能达到什么效果？
工作之余，通过响应式开发，我梳理了一些相关要点，在此分享给大家。

响应式定义

响应式终端

响应式布局相当于在三个终端：电脑、手机、平板（兼容多个终端），浏览统一网站，并都能完美显示，使用户体验到更加舒适的界面。

响应式网页设计（Responsiveweb design）是基于CSS3的媒介查询（MediaQuery）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。响应式设计要以“内容优先”为原则。主要目标要让网站不仅要对用户有限的视口做出响应，还要以最快的时间加载网页。

响应式的特点：

▶优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题。

▶缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长。

响应式开发要素

响应式导图

响应式开发常用要点

要点一：网页代码的头部
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">
<![endif]-->

-->

要点四：CSS3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询
IE8或者更早的浏览器并不支持MediaQuery。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。

要点五：不使用绝对宽度
网页会根据屏幕宽度调整布局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浏览器：开发者 响应式设计视图

注意事项

1、固定像素值要少；
2、用padding,margin调整距离；
3、用百分比调整；
4、不同设备适配要考虑代码量；
5、灵活性。

设计页面尺寸

开发响应式页面需要提供三个设计稿件尺寸分别是：640px、960px、1200px。