響應式之旅

一、什么叫響應式布局

響應式布局是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頁面的不同部分