響應(yīng)式之旅

一、什么叫響應(yīng)式布局

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的。

優(yōu)點：

面對不同分辨率設(shè)備靈活性強

能夠快捷解決多設(shè)備顯示適應(yīng)問題

缺點：

兼容各種設(shè)備工作量大，效率低下

代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長

其實這是一種折中性質(zhì)的設(shè)計解決方案，多方面因素影響而達不到最佳效果

一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況

二、關(guān)于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）

通過不同的媒介類型和條件定義樣式表規(guī)則。媒介查詢讓CSS可以更精確作用于不同的媒介類型和同一媒介的不同條件。媒介查詢的大部分媒介特性都接受min和max用于表達”大于或等于”和”小于或等于”。如：width會有min-width和max-width媒介查詢可以被用在CSS中的@media和@import規(guī)則上，也可以被用在HTML和XML中。

/*當瀏覽器的可視區(qū)域小于等于980px */

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

…….

}

四、響應(yīng)式之Bootstrap

4.1柵格系統(tǒng)

所以一般我們的代碼結(jié)構(gòu)應(yīng)該是這樣的

4.2柵格參數(shù)

通過下表可以詳細查看Bootstrap的柵格系統(tǒng)是如何在多種屏幕設(shè)備上工作的。

所有“列（column）必須放在”?.row內(nèi)。

bootstrap中也很多插件、組件可以直接使用，這里不一一列舉了，建議多去官網(wǎng)溜達

五、響應(yīng)式網(wǎng)站實例

接下分析一下騰達的官網(wǎng)，看看都用到了哪些技術(shù)（http://www.tenda.com.cn/）

觀察整個網(wǎng)頁內(nèi)容所占據(jù)的寬度，主要內(nèi)容應(yīng)該是包含在.container中

5.1網(wǎng)頁header

bootstrap中導(dǎo)航欄的最小高度是50px，需要注意的是導(dǎo)航欄，務(wù)必使用元素，或者，如果使用的是通用的元素的話，務(wù)必為導(dǎo)航條設(shè)置role="navigation"屬性，這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個導(dǎo)航區(qū)域。

導(dǎo)航欄左邊的logo使用了左浮動(.pull-left),右邊的菜單使用了右浮動(.pull-right)。右邊主要使用了.nav .navbar-nav類