一枣购。無處不在的Web

常見的響應(yīng)式網(wǎng)站前端工程師們一般會(huì)使用三種已有的工具：’媒介查詢‘剥汤，’流動(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)胁澳。很長一段時(shí)間以來，Web社區(qū)一直在提倡“優(yōu)雅降級(jí)”米者，一個(gè)類似于計(jì)算機(jī)網(wǎng)絡(luò)這樣的計(jì)算機(jī)領(lǐng)域借用過來的詞韭畸，其主要思想是：當(dāng)你利用新的特性（那些能力最強(qiáng)的瀏覽器支持的特性）時(shí)，你要保證那些相對(duì)較老的瀏覽器也能訪問你的內(nèi)容蔓搞。漸進(jìn)增強(qiáng)從本質(zhì)上來說胰丁，就是把優(yōu)雅降級(jí)給倒過來，不像優(yōu)雅降級(jí)那樣先為最新的喂分，最強(qiáng)勁的瀏覽器開發(fā)站點(diǎn)锦庸，然后再讓功能較差的瀏覽器能使用多少就使用多少功能；相反蒲祈，漸進(jìn)增強(qiáng)會(huì)先創(chuàng)建一個(gè)基本體驗(yàn)甘萧，該基本體驗(yàn)使用具有語義的標(biāo)識(shí)和結(jié)構(gòu)定義，并側(cè)重于內(nèi)容以一種簡潔的方式來展現(xiàn)梆掸，同時(shí)這也是一種具有可用性的形式扬卷，之后再保證基本體驗(yàn)的前提下，才可以開始著手做有關(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)開始汇恤，然后使用流動(dòng)布局和媒介查詢這些技術(shù)來為功能更多，屏幕更大的設(shè)備增強(qiáng)使用體驗(yàn)

二拔恰。流式布局

布局選項(xiàng)：

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

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

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

2）流動(dòng)布局

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

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

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

3）彈式布局

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

彈性布局為設(shè)計(jì)師們在排版方面提供了強(qiáng)大的控制權(quán)能犯，理想的閱讀文本的行寬介于45到70的字符之間鲫骗，利用彈性布局犬耻，你可以將容器的寬度設(shè)定為55em,這樣就可以使容器維持在一個(gè)合適的寬度了

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

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

4）混合布局

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

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

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

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

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

字體大小

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

像素：

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

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

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

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

em

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

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

百分比

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

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

rem：

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

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

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

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

結(jié)束語：

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

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

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

三打月。媒介查詢

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

視口標(biāo)簽的形式非常簡單蚕捉，只需要指定使用的視口元標(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è)置之后秘通，頁面在屏幕上的布局視口將等于設(shè)備的屏幕寬度--設(shè)備像素

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

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

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

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

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

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

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

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

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

媒體查詢設(shè)計(jì)從桌面端向下設(shè)計(jì)栅贴，從移動(dòng)端向上設(shè)計(jì)

使用em為媒介查詢增加靈活性，在以em作為單位之后锰霜，即使站點(diǎn)被放大了筹误，媒介查詢能夠生效，并保證布局仍舊是優(yōu)化過的

響應(yīng)式多媒體

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

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

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

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