响应式布局

响应式布局是就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，可以说响应式的布局是大势所趋，现在越来越多的网站开始采用响应式的布局方案

•使用响应式布局的优点比较明显，就是面对不同分辨率设备灵活性强，还有就是能够快捷解决多设备显示适应问题，也就是在非响应式web设计中，多设置中访问视觉不统一，非最佳视觉，

而在响应式设计中能达到多终端视觉和操作体验非常风格统一。并且可以做到兼容当前和未来设备，另外响应式web设计中的大部分技术都可以用在WebApp开发中，这是是现在比较流行的开发模式。还可以节约开发成本，维护成本也轻松很多。

•当然也存在缺点，像兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长（相比较手机定制网站，流量稍大，但比较加载一个完整pc端网站显然是小得多）；多方面因素影响而达不到最佳效果；在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。所以是否在你的产品中使用响应式布局方案可以折衷考虑。

在CSS3中的Media Queries模块中支持对外部样式表的引用，

使用方法类型如下代码：

@importurl(color.css) screen and (min-width:1000px);

或：

media="only screen and (max-width: 480px),only screen and

(max-device-width: 480px)"href="link.css"rel="externalnofollow" />/*使用link导入外部css文件*/

简写：

上面使用中only可省略，限定于计算机显示器，第一个条件max-width是指渲染界面最大宽度，第二个条件max-device-width是指设备最大宽度。