現(xiàn)在人們上網(wǎng)不只是像以前傳統(tǒng)的在電腦上，而是隨時(shí)隨地的移動(dòng)互聯(lián)時(shí)代，那么移動(dòng)端就孕育而生了 。手機(jī)、筆記本電腦、平板電腦。傳統(tǒng)的設(shè)置網(wǎng)站寬度為固定值，已經(jīng)不能滿足需要了。web設(shè)計(jì)需要適應(yīng)這種新要求，頁面布局需要能夠根據(jù)訪問設(shè)備的不同分辨率自動(dòng)進(jìn)行調(diào)整。

響應(yīng)式布局

響應(yīng)式布局是2010年5月提出的一個(gè)概念，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。其目的是為用戶提供更加舒適的界面和更好的用戶體驗(yàn)。

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：1.面對不同分辨率設(shè)備靈活性強(qiáng)

優(yōu)點(diǎn)： 2.能夠快捷解決設(shè)備顯示適應(yīng)問題

缺點(diǎn)：1.兼容各種設(shè)備工作量大，效率低

缺點(diǎn)：2.代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長

布局實(shí)現(xiàn)

許多網(wǎng)站為實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，有各自的不同做法，主要可以歸結(jié)為以下3種方式： 1）多個(gè)固定尺寸切換的響應(yīng)方式 2）為移動(dòng)端、桌面端分別打造兩套區(qū)間尺寸的響應(yīng)方式 3）跨終端無縫體驗(yàn)的響應(yīng)方式

1.多個(gè)固定尺寸切換的響應(yīng)方式：基于核心用戶的主流設(shè)備，選擇典型的分辨率，分別設(shè)計(jì)出幾個(gè)尺寸版本，投射到相應(yīng)的設(shè)備中去。

2.為移動(dòng)端、桌面端分別打造兩套區(qū)間尺寸的響應(yīng)方式：通過綜合評估網(wǎng)站用戶設(shè)備的終端類型、屏幕尺寸、網(wǎng)站定位，以及不同終端環(huán)境的用戶使用特性，分別為移動(dòng)端和桌面端打造兩套獨(dú)立頁面，它可以實(shí)現(xiàn)所有用戶設(shè)備屏幕尺寸中的部分區(qū)間段的理想體驗(yàn)覆蓋。

3.跨終端無縫體驗(yàn)的響應(yīng)方式：從小屏手機(jī)到大屏電腦所有用戶設(shè)備全尺寸區(qū)間覆蓋的一套完整頁面系統(tǒng)，能兼顧不同類型終端的交互行為差異，帶來跨終端設(shè)備的用戶體驗(yàn)一致性。

Meta 標(biāo)簽 viewport

H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面

在網(wǎng)頁的中增加以上這句話，可以讓網(wǎng)頁的寬度自動(dòng)適應(yīng)手機(jī)屏幕的寬度。

width=device-width ：表示寬度是設(shè)備屏幕的寬度

initial-scale=1.0：表示初始的縮放比例

minimum-scale=0.5：表示最小的縮放比例

maximum-scale=2.0：表示最大的縮放比例

user-scalable=yes：表示用戶是否可以調(diào)整縮放比例

還有很多關(guān)于移動(dòng)web Meta標(biāo)簽的資料可以去我的個(gè)人網(wǎng)站看下

媒體查詢@media

@media就是使用同一套Html代碼來適配不同設(shè)備和滿足不同場景不同用戶使用

語法結(jié)構(gòu)及用法：

@media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二{sRules}

判斷設(shè)備橫豎屏：

/* 這是匹配橫屏的狀態(tài)，橫屏?xí)r的css代碼 */

@media all and (orientation :landscape){}

/* 這是匹配豎屏的狀態(tài)，豎屏?xí)r的css代碼 */

@media all and (orientation :portrait){}

判斷設(shè)備寬高

@media only screen and (max/min-width/height: 960px) { /* 樣式定義 */ }

響應(yīng)式案例

首先要在head里面加上之前說過的meta標(biāo)簽讓其適配設(shè)備瀏覽器的寬度

在CSS部分里加上媒體查詢@media 需要他在什么寬度下代碼改變成什么

注意看右側(cè)的代碼，在屏幕到達(dá)多少寬度的時(shí)候里面的@media就會觸發(fā)之前寫好在CSS里面的代碼。

這個(gè)就是上面寫到過的第一種：固定尺寸切換的響應(yīng)方式。其實(shí)要寫響應(yīng)式更好的還是要用百分比去寫，那樣寫出來的會更加適配屏幕，不會只能在幾個(gè)特定分辨率設(shè)備下顯示非常好的體驗(yàn)效果, 而除這幾個(gè)值之外的設(shè)備上的體驗(yàn)效果將大打折扣；另外用戶的設(shè)備無法窮舉，隨著用戶主流設(shè)備屏幕尺寸的變更，網(wǎng)站仍需要不斷增加或更換尺寸版本。

總結(jié)：

響應(yīng)式這方面的干貨和文章還是很多的，上面的也借鑒了很多前輩的經(jīng)驗(yàn)之談。如果大家還有興趣看的話可以百度“heyuchan”這個(gè)人，她寫了幾篇關(guān)于響應(yīng)式的文章還是很精彩的。

之前寫了幾篇文章也陸陸續(xù)續(xù)有水友和我開始交流，希望我的文章能幫助到你。下篇我會實(shí)戰(zhàn)來解剖響應(yīng)式的頁面給大家來看下。