响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，响应式设计将是一个优秀的UI解决方案。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
二. 响应式布局有哪些优点与缺点？
新事物新技术的出现，会使得很多人盲目跟从，而不会去思考是否真正符合自己当前条件和需求。所以有必要先让它按位入座。
一定程度上解决一个页面多个版本维护，制作成本，效率；
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
三.响应式布局该怎么设计？
目前主流的响应式前端CSS框架有很多，这里我们将介绍一个易用，自定义，快捷的（CSS3中）Media Query（媒体查询）这一利器。使用这个工具，可以非常方便快捷的制作出，符合自己需求的界面。下面我们来一起了解Media Query.
1.CSS中的Media Query （媒体查询）为何？
渲染窗口（视口）的宽和高width，heigth显示屏幕/触觉设备。
设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
画面比例aspect-ratio点阵打印机等。
设备比例device-aspect-ratio-点阵打印机等。
对象颜色或颜色列表color，color-index显示屏幕。
设备的分辨率resolution。
示例一：在link中使用@media：
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“link.css”/>
上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。（这意味着满足媒体查询条件语句的将会引用link.css）.
示例二：在样式表中内嵌@media：
@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） {srules}
在示例二中，设置了电脑显示器分辨率（宽度）大于或等于1024px（并且最大可见宽度为989px）；屏宽在480px及其以下手持设备；屏宽在 480px以及横向（即480尺寸平行于地面）放置的手持设备；屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。
从上面的例子可以看出，字符间以空格相连，选取条件包含在小括号内，srules为兼容设置的样式表，包含在中括号里面。only（限定某种设备，可省略），and（逻辑与），not（排除某种设备）为逻辑关键字，多种设备用逗号分隔，这一点继承了css基本语法。
注：若页面中引入多个媒体样式时，有两个或以上引用有交集产生。那么按照css默认优先级规则，后者将覆盖前者。
添加了 only 关键字后，支持媒体查询语句的浏览器依然正常解析。但不支持媒体查询语句但正确读取媒体介质的设备，由于先读取到 only 而不是 screen ，将忽略这个样式。不支持媒体查询的IE不论是否有 only ，都直接忽略样式。（注：若使用了 not 或 only 操作符，必须明确指定一个媒体类型）
最后是浏览器支持情况：
IE8-- IE9+
- Chrome 5+
- Opera 10+
- Firefox 3.6+<
- Safari 4+
/* 禁用iPhone中Safari的字号自动调整 */
html {-webkit-text-size-adjust： none;}
/* 设置HTML5元素为块 */
article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section
{display： block;}
/* 设置图片视频等自适应调整 */
img {max-width： 100%;height： auto;width： auto9; /* ie8 */}
最后要注意的是在页面的头部<head></head>之间加上下面这句∶
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>
meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明
参数设置∶
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
最后对于在IE浏览器中不支持media query的情况，我们可以使用Media Query ｊａｖａｓｃｒｉｐｔ来解决，只需要在页面头部引用css3-mediaqueries.js即可。示例：
<！--［if lt IE 9］>
<script src=“></script>
<！［endif］-->
本文章部分内容查考学习自：http://www.educity.cn/jianzhan/403677.html 感谢分享。
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
