概念
弹性网格布局，弹性图片，媒体查询
优点
1.减少工作量
网站、设计、代码、内容都只需要一份
多出来的工作量只是js脚本，css样式做一些改动
2.节省时间
3.每个设备都能得到正确的设计
4.搜索优化
缺点
1.会加载更多的样式和脚本资源
2.设计比较难精确定位和控制
3.老版本浏览器兼容不好
五大流浏览器内核及其代表
浏览器的内核是分为两个部分的，一是渲染引擎，另一个是JS引擎。现在JS引擎比较独立，内核更加倾向于说渲染引擎。
1、Trident内核：代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。
代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，
存在很多的兼容性问题。
2、Gecko内核：代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主
要操作系统中使用。
Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战
3、Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。
4、Presto内核：代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了
Presto
5、Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了
媒体查询
@media all and (min-width:800px) and (orientation:landscape){}
操作符：not and only or
css3媒体属性简介：
width:视口宽度
height:视口高度
device-width:渲染表面的宽度，就是设备屏幕的宽度
device-height:渲染表面的高度，就是设备屏幕的高度
orientation:检查设备处于横向还是纵向
aspect-ratio:基于视口宽度和高度的宽高比
device-aspect-ratio:渲染表面的宽度，就是设备屏幕的宽度
color:每种颜色的位数，如：min-color:16位，8位
resolution:检测屏幕或者打印机的分辨率，如：min-resolution:300dpi
viewport视口<meta name="viewport" content="width=device-width,minimum-scale=1.0,maxmum-scale=1.0,usr-scalable=no">
