响应式开发
响应式是什么? 它能帮我们做些什么? 我们该怎么应用？它能达到什么效果？
工作之余，通过响应式开发，我梳理了一些相关要点，在此分享给大家。
响应式定义
响应式终端
响应式布局相当于在三个终端：电脑、手机、平板（兼容多个终端），浏览统一网站，并都能完美显示，使用户体验到更加舒适的界面。
响应式网页设计（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。
网友评论