一。無(wú)處不在的Web

常見(jiàn)的響應(yīng)式網(wǎng)站前端工程師們一般會(huì)使用三種已有的工具：’媒介查詢(xún)‘，’流動(dòng)布局‘，’自適應(yīng)圖片’；創(chuàng)建一個(gè)在不同分辨率屏幕下都能漂亮地顯示的站點(diǎn)。

一個(gè)成功的響應(yīng)式的設(shè)計(jì)方法其實(shí)是建立在于漸進(jìn)增強(qiáng)非常相似的原則之上的，其實(shí)，響應(yīng)式設(shè)計(jì)就是打了激素的漸進(jìn)增強(qiáng)。很長(zhǎng)一段時(shí)間以來(lái)，Web社區(qū)一直在提倡“優(yōu)雅降級(jí)”，一個(gè)類(lèi)似于計(jì)算機(jī)網(wǎng)絡(luò)這樣的計(jì)算機(jī)領(lǐng)域借用過(guò)來(lái)的詞，其主要思想是：當(dāng)你利用新的特性（那些能力最強(qiáng)的瀏覽器支持的特性）時(shí)，你要保證那些相對(duì)較老的瀏覽器也能訪(fǎng)問(wèn)你的內(nèi)容。漸進(jìn)增強(qiáng)從本質(zhì)上來(lái)說(shuō)，就是把優(yōu)雅降級(jí)給倒過(guò)來(lái)，不像優(yōu)雅降級(jí)那樣先為最新的，最強(qiáng)勁的瀏覽器開(kāi)發(fā)站點(diǎn)，然后再讓功能較差的瀏覽器能使用多少就使用多少功能；相反，漸進(jìn)增強(qiáng)會(huì)先創(chuàng)建一個(gè)基本體驗(yàn)，該基本體驗(yàn)使用具有語(yǔ)義的標(biāo)識(shí)和結(jié)構(gòu)定義，并側(cè)重于內(nèi)容以一種簡(jiǎn)潔的方式來(lái)展現(xiàn)，同時(shí)這也是一種具有可用性的形式，之后再保證基本體驗(yàn)的前提下，才可以開(kāi)始著手做有關(guān)顯示的布局和交互，但此時(shí)會(huì)為能力更強(qiáng)的瀏覽器創(chuàng)建更吩咐的體驗(yàn)。

響應(yīng)式設(shè)計(jì)使用了同樣的思想，并會(huì)針對(duì)不同的設(shè)備提供適當(dāng)?shù)膬?nèi)容和布局，即先從一個(gè)基本的體驗(yàn)開(kāi)始，然后使用流動(dòng)布局和媒介查詢(xún)這些技術(shù)來(lái)為功能更多，屏幕更大的設(shè)備增強(qiáng)使用體驗(yàn)

二。流式布局

布局選項(xiàng)：

1）固定布局：在固定布局中，頁(yè)面寬度會(huì)被指定為特定大小的像素，其中960px是使用最為廣泛的寬度，在最近比較流行的1024分辨率 屏幕的最佳頁(yè)面寬度應(yīng)該介于974到984px之間。

固定布局是web布局中最為常見(jiàn)的實(shí)現(xiàn)方式，因?yàn)楣潭ú季謺?huì)給人一種對(duì)頁(yè)面擁有較多控制權(quán)的錯(cuò)覺(jué)，能確切地知道你的站點(diǎn)會(huì)以多寬來(lái)顯示，這使得你能創(chuàng)建出擁有大量圖形的設(shè)計(jì)，而且即使在不同的屏幕上，它們也能看起來(lái)相當(dāng)一致

然而，固定布局最大的問(wèn)題在于，你所做的一切都是在許多假設(shè)前提之下的，當(dāng)你決定站點(diǎn)應(yīng)該有多寬時(shí)，你不得不去猜測(cè)什么樣的尺寸可以照顧到大多數(shù)的訪(fǎng)客，而這其中又暗藏著比從表面上看起來(lái)多得多的技巧。當(dāng)瀏覽器寬度小于站點(diǎn)的固定布局的寬度時(shí)，用戶(hù)就會(huì)看到丑陋的水平滾動(dòng)條

2）流動(dòng)布局

在流動(dòng)布局中，度量的單位不再是像素，而是變成了百分比，這樣可使頁(yè)面具有可變的特性，你可以設(shè)計(jì)一個(gè)占容器寬度百分之60的內(nèi)容欄，一個(gè)占容器寬度百分之30的邊欄，以及一個(gè)占容器寬度百分之10的分隔區(qū)域，采用這種方法定義，意味著你不用再去關(guān)心用戶(hù)使用的到底是1024px寬的桌面瀏覽器，還是768px寬的平板電腦瀏覽器，因?yàn)樵氐膶挾葧?huì)根據(jù)瀏覽器窗口的寬度自動(dòng)進(jìn)行調(diào)整

流動(dòng)布局的設(shè)計(jì)可以避免許多會(huì)在固定布局中遇見(jiàn)的問(wèn)題，例如，在大多數(shù)情況下，流動(dòng)布局中都不會(huì)出現(xiàn)水平滾動(dòng)條，由于站點(diǎn)可以根據(jù)瀏覽器窗口的寬度來(lái)自動(dòng)調(diào)節(jié)自身寬度，因此站點(diǎn)將可以充分利用并適應(yīng)各種大學(xué)的可用空間，從而也就避免了在使用大屏幕設(shè)備瀏覽固定布局時(shí)，人們所不愿見(jiàn)到的大片空白出現(xiàn)

同時(shí)，在實(shí)施諸如媒體查詢(xún)，針對(duì)不同分辨率優(yōu)化樣式這樣的響應(yīng)式策略時(shí)，流動(dòng)布局能使這些策略更容易實(shí)現(xiàn)。由于沒(méi)有那么多的問(wèn)題需要修復(fù)，所以需要寫(xiě)的css也相當(dāng)較少。但是，單獨(dú)使用流動(dòng)布局這一種方法依然不足以保證所有元素在從手機(jī)到電視機(jī)等一系列設(shè)備上都能保持良好的效果。因?yàn)橛行┪谋镜男袑捲诖笃聊簧峡雌饋?lái)會(huì)太寬，而在小屏幕上又看起來(lái)太窄。

3）彈式布局

彈性布局與流動(dòng)布局類(lèi)似，只是他們的度量單位不同，通常情況下，在彈性布局中會(huì)以em來(lái)作為單位。1em相當(dāng)于當(dāng)前字體的大小，例如，如果body的字體大小是16px,那么1em就等于16px，同理2em就是32px

彈性布局為設(shè)計(jì)師們?cè)谂虐娣矫嫣峁┝藦?qiáng)大的控制權(quán)，理想的閱讀文本的行寬介于45到70的字符之間，利用彈性布局，你可以將容器的寬度設(shè)定為55em,這樣就可以使容器維持在一個(gè)合適的寬度了

彈性布局帶來(lái)的另外一個(gè)好處是隨著用戶(hù)增大或者減小字體，使用彈性布局的元素的寬度也會(huì)等比例變化，我們會(huì)在后面討論字體大小時(shí)進(jìn)一步討論這個(gè)問(wèn)題

但是，彈性布局中也可能出現(xiàn)令人討厭的水平滾動(dòng)條，如果你把字體大小設(shè)置為16px，并把容器寬度設(shè)置為55em，那么就會(huì)在任何寬度小于880px的屏幕中出現(xiàn)水平滾動(dòng)條，彈性布局中的這個(gè)問(wèn)題甚至比固定布局的情況還要有更多的不確定性

4）混合布局

假設(shè)你有一個(gè)300px寬的廣告區(qū)域，你可以將防止廣告的邊欄指定為固定的300px寬，其余寬度則以百分比為單位。如果把邊欄設(shè)置為300px寬，把主要內(nèi)容欄設(shè)置為70%,那么屏幕寬度小于1000px時(shí)，還是會(huì)遇到水平滾動(dòng)條的問(wèn)題

問(wèn)：那種布局是最具響應(yīng)性的

從根本上來(lái)說(shuō)，這取決于你特定的項(xiàng)目，因?yàn)槊恳环N方法都有其優(yōu)勢(shì)和不足

大多數(shù)情況下，最佳答案是更具靈活性的哪幾種布局：流動(dòng)布局，彈性布局或者混合布局。因?yàn)橄鄬?duì)固定布局，它們對(duì)未來(lái)更加友好

雖然能夠通過(guò)使用媒介查詢(xún)來(lái)在幾個(gè)固定布局之間來(lái)回切換，但這樣做仍舊存在限制，因?yàn)槭褂靡粋€(gè)這樣的”可切換“的固定布局，會(huì)使得你的站點(diǎn)在某幾個(gè)特定分辨率的屏幕顯得非常好，但在這幾個(gè)值之間過(guò)度的那些分辨率的屏幕中救護(hù)i顯得比較尷尬，這樣一來(lái)，用戶(hù)就會(huì)受到你的決定的支配

字體大小

字體大小就三種，像素，em,還有百分比

像素：

對(duì)于初學(xué)者來(lái)言，雖然使用像素作為字體大小單位時(shí)不需要考慮級(jí)聯(lián)--父元素的字體大小對(duì)子元素沒(méi)有影響，但這也意味著當(dāng)你想讓某些文本以不同的大小顯示時(shí)就需要對(duì)它們逐一設(shè)置，這對(duì)于維護(hù)來(lái)說(shuō)非常不利，因?yàn)楫?dāng)你想增大所有字體時(shí)，你就不得不去逐一修改每一個(gè)值，更重要是，以像素為單位的字體存在著潛在的可訪(fǎng)問(wèn)性問(wèn)題，所有主流瀏覽器都允許用戶(hù)放大或縮小頁(yè)面，瀏覽器對(duì)該操作通常有哦兩種實(shí)現(xiàn)方式。

第一種實(shí)現(xiàn)方式是簡(jiǎn)單地將頁(yè)面上所有東西都放大，頁(yè)面上其他元素則保持不變長(zhǎng)期以來(lái)這都是常見(jiàn)的瀏覽器實(shí)現(xiàn)方式，并且現(xiàn)在仍有一些瀏覽器采用這種方式實(shí)現(xiàn)縮放功能

另外一種方式是瀏覽器只調(diào)整字體大小，頁(yè)面上其他元素則保持不變，長(zhǎng)期以來(lái)這都是常見(jiàn)的瀏覽器實(shí)現(xiàn)方式，并且現(xiàn)在仍有一些瀏覽器采用這種方式實(shí)現(xiàn)縮放功能

用像素制定字體大小依然不是一種對(duì)未來(lái)特別友好的方式，由于不同的設(shè)備有著不同的屏幕大小和像素密度，因此以像素為單位的字體也許在這臺(tái)設(shè)備上 看起來(lái)不錯(cuò)，但在另一臺(tái)設(shè)備上看起來(lái)也許就會(huì)要么太大，要么太小，使用像素作為字體大小的單位，是與web的靈活性原則背道而馳的做法

em

使用em作為字體大小的單位是一種更加流行，更具靈活性的方法，1em等于默認(rèn)的字體大小，如果內(nèi)容字體大小是16px,那么1em=16px；

em也是可以跨瀏覽器進(jìn)行縮放的，而且他們也是級(jí)聯(lián)的，從簡(jiǎn)化維護(hù)的角度來(lái)看這是好事，因?yàn)檫@樣相對(duì)地制定元素的字體大小，意味著你只需要調(diào)整初始化時(shí)的基準(zhǔn)，其余部分就會(huì)自動(dòng)地調(diào)整，而且是按照比例調(diào)整的。

百分比

和以em為單位的字體一樣，以百分比為單位的字體也是可縮放的，而且也是級(jí)聯(lián)的，與em類(lèi)似的是，如果基準(zhǔn)字體大小是16px的話(huà)，那么100%相當(dāng)于16px,200%就是32px

雖然從理論上講，百分比和em沒(méi)有太大的區(qū)別，而且em逐漸成為了web中更受歡迎的字體度量單位，但其實(shí)這其中并沒(méi)有什么技術(shù)上的原因。只有當(dāng)出于em直接與文本大小相關(guān)的考慮時(shí)，使用em才更有意義。然而以em為單位的基準(zhǔn)字體時(shí)忽悠問(wèn)題，ie會(huì)夸大實(shí)際應(yīng)當(dāng)調(diào)整的字體大小，假設(shè)基準(zhǔn)字體設(shè)置為1em，并且將h1設(shè)置為2em，其他瀏覽器沒(méi)有什么問(wèn)題，在ie中會(huì)變得更大，解決這個(gè)問(wèn)題，就可以使用百分比來(lái)繞過(guò)這個(gè)問(wèn)題

rem：

rem與em的區(qū)別在于，rem大小與根元素--html元素有關(guān)，使用rem可以避免發(fā)生在嵌套中的級(jí)聯(lián)問(wèn)題。，但對(duì)于rem,,僅僅支持ie9以上的。

那種單位是最具相應(yīng)性的

使用em不但可以使文字能夠縮放，而且維護(hù)起來(lái)也更加容易，如果你要將整個(gè)站點(diǎn)的字體都增大，那么只需簡(jiǎn)單地修改body上字體的百分比即可，如果使用rem,由于需要有像素聲明作為補(bǔ)充，所以你還要更新所有的像素值。一般都以百分比作為body元素字體大小的單位，而以em來(lái)作為其他元素的單位

2.3網(wǎng)格布局====

結(jié)束語(yǔ)：

大多數(shù)情況下，流動(dòng)布局（以百分比為單位，因而可以根據(jù)屏幕大小來(lái)調(diào)整自身的布局）是你設(shè)計(jì)站點(diǎn)時(shí)的最佳選擇，當(dāng)寬度被字體大小啊限制時(shí)，你可以使用彈性布局；當(dāng)寬度被百分比限制時(shí)，你可以使用流動(dòng)布局。

采用更加靈活的方式來(lái)制定文字大小可以使維護(hù)工作變得更加容易，同時(shí)這樣做也提升了站點(diǎn)的可訪(fǎng)問(wèn)性，為了達(dá)到這個(gè)目標(biāo)，我們就要堅(jiān)持使用百分比和em。

通過(guò)使用css表格，你可以很容易地將固定寬度與流動(dòng)寬度結(jié)合使用，現(xiàn)代瀏覽器對(duì)此特性有著極為出色的支持，而且你還可以使用條件注釋來(lái)為ie7及以下版本的ie瀏覽器提供備用樣式

三。媒介查詢(xún)

通過(guò)視口元標(biāo)簽，我們可以控制頁(yè)面在很多設(shè)備上的大小和布局視口

視口標(biāo)簽的形式非常簡(jiǎn)單，只需要指定使用的視口元標(biāo)簽，需要放在head標(biāo)簽中

<meta name="viewport" content="directive,directive"/>

屬性介紹：

1.width:聲明可以讓你將視口設(shè)置為某一特定的寬度，或設(shè)置為設(shè)備屏幕的寬度.<meta name="viewport" content="width=device-width"/>

在width聲明中使用device-width是最佳的選擇，因?yàn)樵O(shè)置之后，頁(yè)面在屏幕上的布局視口將等于設(shè)備的屏幕寬度--設(shè)備像素

2.height:允許你指定一個(gè)特定的高度<meta name="viewport" content="height=device-height"/>,布局視口的高度等于屏幕的高度，一般不會(huì)用到height，因?yàn)閔eight唯一讓人覺(jué)得有用的時(shí)候，是在你不想讓頁(yè)面垂直滾動(dòng)的時(shí)候。

3.user-scalable,聲明瀏覽器，是否允許用戶(hù)在頁(yè)面上進(jìn)行縮放<meta name="viewport" content="user-scalable=no"/>,默認(rèn)值是yes.為什么會(huì)設(shè)置因?yàn)閕os方向漏洞，如果你把視口設(shè)置為任意大小并且允許用戶(hù)縮放頁(yè)面的話(huà)，那么當(dāng)你將設(shè)備橫屏之后，頁(yè)面會(huì)自動(dòng)變大，這會(huì)迫使用戶(hù)不得不點(diǎn)擊屏幕兩次來(lái)使頁(yè)面得到正確的縮放，從而避免頁(yè)面被剪裁，如果禁用了縮放，這問(wèn)題就不存在了，在ios6之后這個(gè)問(wèn)題就修復(fù)了。

4.initial-scale,可以通過(guò)給initial-scale賦值為0.1（10%）到10.0（1000%）之間的某個(gè)數(shù)來(lái)設(shè)置頁(yè)面初始化時(shí)的縮放層級(jí)，正常我們?cè)O(shè)置為百分比縮放<meta name="viewport" content="initial-scale=1,width=device-width"/>

5.maximum-scale聲明可以告訴瀏覽器允許用戶(hù)放大頁(yè)面到什么程度，在移動(dòng)端的safari,其默認(rèn)值是1.6，數(shù)值也是在0.1到10.0之間，如果你設(shè)置為1.0,那么你同樣禁用了用戶(hù)縮放頁(yè)面，這樣做也同樣會(huì)降低站點(diǎn)的可訪(fǎng)問(wèn)性。

6.minimum-scale聲明會(huì)告知瀏覽器允許用戶(hù)將頁(yè)面縮小到什么程度，在移動(dòng)端safari,其默認(rèn)值是0.25.，如果值設(shè)置為1.0，也同意運(yùn)行禁止用戶(hù)縮小頁(yè)面。

修復(fù)視口問(wèn)題，事實(shí)證明視口元表情實(shí)際上不規(guī)范的，通過(guò)看W3C的文檔，提供了@viewport規(guī)則，css設(shè)備適配，@viewport規(guī)則可以讓你在css中直接使用視口元標(biāo)簽

@viewport{width:device-width;},但是該語(yǔ)法僅僅支持opera和ie10

媒介查詢(xún):四個(gè)基本組成部分：媒介類(lèi)型，媒介表達(dá)式，邏輯關(guān)鍵詞，規(guī)則

媒介表達(dá)式：@media screen and (min-width:32px){}????

媒體查詢(xún)?cè)O(shè)計(jì)從桌面端向下設(shè)計(jì)，從移動(dòng)端向上設(shè)計(jì)

使用em為媒介查詢(xún)?cè)黾屿`活性，在以em作為單位之后，即使站點(diǎn)被放大了，媒介查詢(xún)能夠生效，并保證布局仍舊是優(yōu)化過(guò)的

響應(yīng)式多媒體

有選擇的為手機(jī)提供圖片

自定義數(shù)據(jù)屬性：專(zhuān)門(mén)為頁(yè)面存儲(chǔ)自定義數(shù)據(jù)并具有data-前綴的屬性，通常出于腳本編程的目的而設(shè)置

響應(yīng)式圖片的實(shí)現(xiàn)方法：Sencha.io Src是最近似于即插即用型的響應(yīng)式圖片的解決方案，它以你的圖片作為輸入，并返回縮放后的圖片，你只需要在你的圖片資源前面加上Sencha.io Src的鏈接即可，會(huì)使用發(fā)起請(qǐng)求的設(shè)備的用戶(hù)代理字符串來(lái)計(jì)算出設(shè)備屏幕的大小，然后根據(jù)該數(shù)值來(lái)縮放圖片。默認(rèn)情況下，它會(huì)將圖片縮放到設(shè)備寬度的100%。。

優(yōu)勢(shì)是：會(huì)緩存請(qǐng)求，這樣便不用在每次加載頁(yè)面時(shí)都要生成一次圖片。