响应式之旅

一、什么叫响应式布局

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

优点：

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

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

缺点：

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

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

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

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

二、关于meta标签

“<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>”

initial-scale:初始的缩放比例

minimum-scale:允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable:是否允许缩放

三、媒体查询（Media Query）

通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

/*当浏览器的可视区域小于等于980px */

@media screenand ( max-width: 980px ) {

…….

}

四、响应式之Bootstrap

4.1栅格系统

所以一般我们的代码结构应该是这样的

4.2栅格参数

通过下表可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。

所有“列（column）必须放在” .row内。

bootstrap中也很多插件、组件可以直接使用，这里不一一列举了，建议多去官网溜达

五、响应式网站实例

接下分析一下腾达的官网，看看都用到了哪些技术（http://www.tenda.com.cn/）

观察整个网页内容所占据的宽度，主要内容应该是包含在.container中

5.1网页header

bootstrap中导航栏的最小高度是50px，需要注意的是导航栏，务必使用元素，或者，如果使用的是通用的元素的话，务必为导航条设置role="navigation"属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。

导航栏左边的logo使用了左浮动(.pull-left),右边的菜单使用了右浮动(.pull-right)。右边主要使用了.nav .navbar-nav类

5.2网页轮播

这是腾达官网的轮播效果，而在Bootstrap中也有专门的轮播插件

5.3网页第三版

首先整个结构的文字是居中，所以可以在外层使用.text-center。其次这个版块可以分为上下结构。一个.container中包含两个.row。

第一个.row包含两个col-xs-12，文字居中显示(.text-center)

第二个.row，包含4个.col-sm-3，当设备宽度小于768时，一行显示两个，代码结构应该是这样的

5.4网页第四版

这一版主要结构同上一版结构一样，不难看出这一版的结构应该是

5.5网页footer

同样footer也可以分为上下结构，一个.container中包含两个.row

第一个.row中包含六个.col-sm-2，每一个.col-sm-2中包含一个ul列表(.list-unstyled)

第二个.row中包含一个.col-xs-12,文本居中(.text-center)

六、练一练（http://www.golaravel.com/）

6.1header

6.2 section

6.3 footer

七、续

html5中新的语义元素

许多现有网站都包含以下html代码："<header> <nav> <section> <article> <aside> <footer>"

来指明导航链接、头部、尾部。Html5提供了新的语义元素来明确一个Web页面的不同部分