什么是响应式布局

相关推荐

什么是响应式布局

　　响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

　　优点： 面对不同分辨率设备灵活性强

　　能够快捷解决多设备显示适应问题

　　缺点：兼容各种设备工作量大，效率低下

　　代码累赘，会出现隐藏无用的元素，加载时间加长

　　其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

　　一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

　　响应式设计的步骤：

　　1. 设置 Meta 标签

　　大多数移动浏览器将html页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

　　<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

　　[1](user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 )

　　2. 通过媒介查询来设置样式 Media Queries

　　viaMedia Queries 是响应式设计的核心。

　　它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

　　@media screen and (max-width: 980px) {

　　#head { … }

　　#content { … }

　　#footer { … }

　　}

　　这里的样式就会覆盖上面已经定义好的样式。

　　3. 设置多种试图宽度

　　假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：