前端响应式开发

最近在工作中遇到一些让人头疼的问题——多媒体查询，也就是大家所说的响应式布局（多终端适配）。在实际的开发过程中，响应式的设计使得多终端的适配变得非常方便，响应式展现的方式，更有一种组装变形金刚的感觉，但也在实际工作中发现了许多问题：

　　一、开发思维变得复杂

　　在我们开发页面的时候，思维无法专注于单一的PC端、移动端以及Pad端，开发每一个元素与版块的时候，都需要考虑多终端适配；所以建议大家在接到这一类项目的时候，不要急于去开发，先把所有的终端页面设计图全部浏览的看一遍，不单单光是看，看的过程中脑海里要有响应式开发的思路，不至于到后期花费大量的时间用于修改页面。

　　二、牵一发而动全身

　　响应式的设计初衷是一次开发，多终端适配，但在实际的应用中，即使有通过判断终端类型，而变换页面内容甚至隐藏的方式，也无法应对用户所提出的多终端之间的各种要求，而且每次需要修改一个页面的元素或者局部板块时，对于其他终端页面的影响都会令人头疼，因为考虑的内容较多，比如浏览器版本对于新技术的支持程度、不同版本间的BUG兼容、使用场景、屏幕的大小变化等等，顾忌太多，牵一发而动全身的特性无疑为后期维护增加了难度。

　　三、文件体积偏大
　　有时候为了适配多终端、多版本浏览器之间的兼容问题，需要为不同终端写不同的代码段，但如果通过一个页面满足多终端的个性化需求，这个页面的代码体积无疑是非常大的，对于PC端还好说，对于流量昂贵的移动终端这无疑是致命的。

说了这么多问题，我们为什么还要用响应式，响应式也有几个优点：

1. 工作量少，网站、代码、内容只需要一份，多出来的工作量只是JavaScript脚本、CSS样式；
2. 每个设备都能得到正确的设计；
3. 搜索优化；
4. 数据调用简单；

下面说一下响应式开发都需要做些什么：

 第一步：Meta标签 (允许网页宽度自动调整)

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

【viewport是网页默认的宽度和高度，上面代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。】

（所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。）
　　or
（ie8以及更早的浏览器不支持Media Query
可以使用media-queries.js或者respond.js来为IE添加Media Query支持）

 

第二步：HTML结构

注意：尽量不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素；
2）相对字体大小
字体可以不使用绝对大小（px），使用相对大小（em）。
body {
    font: normal 100% Helvetica, Arial, sans-serif;
}

第三步：媒介查询（css3 Media Query 媒介查询）

　　方法一：
　　@media screen and (max-1000px){
  　　 content:{100%;}
　　}

　　方法二：

　　<link rel="stylesheet" media="screen and (max-640px)" href="">

媒体查询能检测的特性：

width : 视口宽度
height : 视口高度
device-width ：设备屏幕宽度
device-height : 设备屏幕高度orientation : 检查设备处于横向还是纵向
aspect-ratio : 视口宽度和高度的宽高比，例如：一个16：9比例的显示屏可以这样定义aspect-ratio : 16/9;
device-aspect-ratio : 设备屏幕宽度和高度的宽高比；
color : 每种颜色的位数，例如min-color:16会检测设备是否拥有16位颜色；
color-index ：设备的颜色索引表中的颜色数，值必须是非负数的；
monochrome : 检测单色帧缓冲区中每像素所使用的位数，值必须是非负数的，例如：monochrome : 2;
resolution : 用来检测屏幕或打印机的分辨率，如min-resolution : 300dpi，每厘米像素点数的度量值，如min-resolution : 118dpcm;
scan : 电视机的扫描方式，值可设为progressive（逐行扫描）或者interlace（隔行扫描），如720p HD 电视（720p的p表示逐行扫描）,scan : progressive，而1080i HD 电视的i表示隔行扫描，匹配scan : interlace ; grid : 用来检测输出设备是网格设备还是位图设备;

 

屏幕尺寸响应
　　1.固定布局
　　2.流动布局
　　3.自定义布局
　　4.栅格布局

　　分辨率：预设的分辨率有（可切换横版，竖版）
　　普通智能手机：320×480
　　iPhone5：320×568
　　普通平板：800×600
　　iPad2、3、mini：768×1024
　　宽屏电脑：1280×800
　　HDTV：1920×1080