### 响应式布局有哪些优点和缺点 **优点：**  面对不同分辨率设备灵活性强  能够快捷解决多设备显示适应问题  **缺点：**  兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长  其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果  一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 ### 1、Media Query CSS3中的Media Query（媒介查询） Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。根据视窗的大小自动调整布局。 **1、通过不同的媒体类型和条件定义样式表规则。** 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面 **2、Media能获得的值** 设备的宽和高: device-width,device-height显示屏幕/触觉设备 渲染窗口的宽和高: width，heigth显示屏幕/触觉设备 设备的手持方向: orientation(portrait|lanscape) 横向/竖向 画面比例: aspect-ratio 浏览器的长宽比 屏幕比例: device-aspect-ratio 设备屏幕的长宽比，如4/3,16/9等。 视觉媒体: color 定义每一组输出设备的彩色原件个数，如果不是彩色设备，则值等于0 分辨率: resolution 定义设备的非暴力，如:96dpi,300dpi 以上仅仅orientation不支持max,min. **3、可用设备参数名** all 所有设备 braille 盲文 embossed 盲文打印 handheld 手持设备 print 文档打印或者打印预览模式 projection项目演示(如幻灯片) screen 彩色电脑屏幕 tty 固定字母间距的网络媒体，如电传打字机 **4、逻辑关键字** only 限定某种设备类型 and 逻辑与，连接设备名与选择条件、选择条件1与选择条件2 not 排除某种设备(除了什么之外) , 设备列表 **5、语法结构及用法** @media 设备名 only (选取条件) not (选取条件) and (设备选取条件), 设备二{sRules} 在link中使用@media: <link rel = "stylesheet" type = "text/css" media = "only screen and (max-width： 640px),only screen and (max-device-width： 640px)" href = “home.css”/>  only可以省略，第一个条件是网页的最大宽度是640，第二个条件是设备的最大宽度是640px。  @media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {//code}  电脑屏幕尺寸不小于1024px，并且最大的可见宽度为989px;设备最大宽度为480px，并且横向放置，设备宽度不小于480px，并且小于1024px，竖直放置的设备。  字符间以空格相连，选取条件包含在小括号内，code为设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔.  **6、测试响应式布局**  响应式布局需要在不同的设备上测试，可以使用浏览工具来检验不同尺寸屏幕小的显示效果。帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator [http://responsive.d3corp.com/?d3corp.com](http://responsive.d3corp.com/?d3corp.com) **7、响应式布局设计** ~~~ /*浏览器的可视区域不小于980px*/ @media screen and (min-width:980px){ .head{width:100%; height:70px; } .head #logo{position:fixed; top:0px; left:50px;} .head nav{ width:870px;background:#fff;height:70px; margin:0 auto;} .head nav a{ width:100px; height:40px; margin:15px 0px; display:inline-block; } } /*浏览器的可视区域在640px和980px之间*/ @media screen and (min-width:640px) and (max-width:980px){ .head{width:70px;height:870px;} .head nav{ width:70px;background:#fff;height:870px;margin-top:20px;} .head nav a{ width:70px; height:40px; margin:15px 0px; display:inline-block; } } /*浏览器的可视区域小于640px*/ @media screen and (max-width:640px){ .head{width:256px; height:256px;position:fixed; bottom:20px; left:20px;} .head #logo{position:absolute; top:0px; left:0px; right:0; bottom:0; padding:auto; margin:auto;} .head nav{width:256px; height:256px;background-color:rgba(0,0,0,0.6); border-radius:50%; transform:scale(0.1) rotate(-270deg); opacity:0; transition:all 500ms;margin-top:0px;} .head nav a{display:block; width:40px;height:40px;border-radius:50%; position:absolute;margin-left:-20px; margin-top:-20px; } ~~~ 为了更好的显示效果，往往还要格式化一些CSS属性的初始值，如： ~~~ /* 禁用iPhone中Safari的字号自动调整 */ 　　html { 　　-webkit-text-size-adjust： none; 　　} 　　/* 设置HTML5元素为块 */ 　　article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section { 　　display： block; 　　} ~~~ ### 2、利用meta标签对viewport进行控制 移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。  设置width为decice-width; ~~~ <meta name="viewport" content="width=device-width; initial-scale=1.0"> ~~~ 　content中参数设置:  　　width – viewport的宽度  　　height – viewport的高度,这个属性很少使用  　　initial-scale – 初始的缩放比例  　　minimum-scale – 允许用户缩放到的最小比例  　　maximum-scale – 允许用户缩放到的最大比例  　　user-scalable – 用户是否可以手动缩放 no或者yes  　　最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：  IE8及低版本浏览器不支持CSS3 media queries的解决方法  另外关于IE8低版本兼容问题可参考：[http://blog.csdn.net/wuruixn/article/details/8642934](http://blog.csdn.net/wuruixn/article/details/8642934)