前端响应式开发

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

　　1、开发思惟变得复杂

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

　　2、牵一发而动全身

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

　　3、文件体积偏大
　　有时候为了适配多终端、多版本浏览器之间的兼容问题，须要为不一样终端写不一样的代码段，但若是经过一个页面知足多终端的个性化需求，这个页面的代码体积无疑是很是大的，对于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。对于那些老式浏览器（主要是IE六、七、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-width:1000px){
  　　 content:{width:100%;}
　　}

　　方法二：

　　<link rel="stylesheet" media="screen and (max-width: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　　iPad二、三、mini：768×1024　　宽屏电脑：1280×800　　HDTV：1920×1080