摘要：響應(yīng)式布局的概念響應(yīng)式布局，即，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式?？蚣軐?shí)現(xiàn)響應(yīng)式布局利用中柵格系統(tǒng)可以簡(jiǎn)單實(shí)現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)代表在端上顯示在一行的個(gè)柵欄，也就是一半。

響應(yīng)式布局，即 Responsive design，在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。

但需要注意的是，響應(yīng)式布局的關(guān)鍵不僅僅在于布局，更多的是細(xì)節(jié)需要去考慮，譬如表單的響應(yīng)式設(shè)計(jì)、圖片的響應(yīng)式設(shè)計(jì)。

當(dāng)創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站，或者將非響應(yīng)式布局改成響應(yīng)式的時(shí)候，首先要關(guān)注的是元素的布局?？梢韵韧瓿煞琼憫?yīng)式布局，即頁面寬度是固定大小的，這樣應(yīng)該是沒有任何難度的。在完成了非響應(yīng)式后，可以通過添加媒體查詢（Media Query)和響應(yīng)式代碼實(shí)現(xiàn)響應(yīng)式特性。

在完成非響應(yīng)式布局后，head中添加如下代碼。設(shè)置meta標(biāo)簽來告訴瀏覽器，讓視口寬度等于設(shè)備寬度，而且需要禁止用戶縮放行為。

這里視口的設(shè)置需要注意的是，視口就是可見的屏幕尺寸；設(shè)置視口時(shí)只設(shè)置寬度，而不在乎高度，這是因?yàn)楦叨扔蓛?nèi)容自動(dòng)撐開。

媒體查詢（media query）是響應(yīng)式設(shè)計(jì)的核心，它能夠和瀏覽器進(jìn)行溝通，告訴瀏覽器頁面如何呈現(xiàn)。媒體查詢，它查詢的就是視口寬度，查詢用戶使用什么樣的設(shè)備來訪問的頁面，知道了設(shè)備尺寸就可以調(diào)用相應(yīng)的響應(yīng)式代碼。

那該如何寫入媒體查詢呢？

1、style標(biāo)簽中的media屬性

譬如，在屏幕寬度不超過340的時(shí)候執(zhí)行，背景色為紅色

可以復(fù)制以下代碼進(jìn)行實(shí)踐，修改模擬設(shè)備的尺寸大小，顯示不同背景色

2、在link標(biāo)簽中設(shè)置media屬性

通過引入外部css，也可以實(shí)現(xiàn)上面代碼顯示的效果

那在這個(gè)720-1080.css文件中只需要寫

body{ background: blue; } 

其實(shí)，到這一步應(yīng)該能明白一些響應(yīng)式布局的理念，針對(duì)不同設(shè)備尺寸編寫不同樣式，通過媒體查詢來判斷出設(shè)備尺寸類型，調(diào)用相應(yīng)的樣式。

3、外鏈css樣式中的@media屬性

以上內(nèi)容都是將媒體查詢的語句嵌在HTML中，現(xiàn)在都講究模塊分離的思想，所以我們也需要將媒體查詢的語句寫在css中，實(shí)現(xiàn)HTML和CSS的分離。

那么在head中寫入

那在這個(gè)720-1080.css文件中則需要這樣寫

@media screen and (min-width:340px) and (max-width:720px) {
    body{
        background: blue;
    }
}

三種媒體查詢寫法介紹完了，你一定會(huì)很好奇，代碼中那些340px、720px都是如何確定。很簡(jiǎn)單，一般的設(shè)備尺寸可以百度，推薦這個(gè)網(wǎng)站 http://screensiz.es/phone

說一些比較常見的分辨率節(jié)點(diǎn)，都是以比較關(guān)鍵的機(jī)型的分辨率作為參考來設(shè)置。比如iPhone4、5的寬度是320px，這個(gè)節(jié)點(diǎn)就非常重要，它是小屏幕手機(jī)的一個(gè)分界點(diǎn)，一般都會(huì)在媒體查詢的時(shí)候設(shè)置這個(gè)點(diǎn)。ipad mini的寬度是768，這代表著中型屏幕，所以第二個(gè)節(jié)點(diǎn)就設(shè)置為768 。

具體就可以這樣寫

/* iPad媒體查詢的寫法 */
@media only screen and (min-width:768px) and (max-width:1024px){
    ...
}

/* iPhone媒體查詢的寫法 */
@media only screen and (min-width:320px) and (max-width:767px){
    ...
}

這里所說的媒體查詢?cè)O(shè)置網(wǎng)頁不是上面所提到的實(shí)現(xiàn)步驟，在本文開始就有說過，響應(yīng)式布局的關(guān)鍵在于布局，但現(xiàn)實(shí)情況中，存在PC端和手機(jī)端，你編寫的網(wǎng)頁是基于PC端的，去適配手機(jī)端，還是基于手機(jī)端，為了適配PC端，這是兩種情況，也就對(duì)應(yīng)著兩種設(shè)計(jì)方案。對(duì)于媒體查詢來說，就是分為從大往小寫，還是從小往大寫，這涉及到其他的內(nèi)容，就不贅述了，可以百度響應(yīng)式布局中媒體查詢分辨率順序?qū)懛ā?/p> 需要注意的細(xì)節(jié)點(diǎn)

本文開始也說過，響應(yīng)式布局的關(guān)鍵不僅僅在于布局，更多的是細(xì)節(jié)需要去考慮。也就是兼容性問題、字體尺寸單位、視口寬高的設(shè)置、圖片的處理、表單的處理...

1、兼容性問題

IE6、IE7、IE8是不支持媒體查詢的。
解決方案：css3-mediaqueries.js。引入此文件可以解決IE6-8無法實(shí)現(xiàn)響應(yīng)式媒體查詢的尷尬。

2、字體尺寸單位

css3引入了新的單位叫做rem，rem是相對(duì)于根元素的，不要忘記重置根元素字體大小

html{font-size:100%;}

完成后，就可以定義響應(yīng)式字體：

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

3、視口寬高的設(shè)置

不同設(shè)備，不同寬度。寬度不固定，可以使用百分比。

4、圖片的處理

帶寬是手機(jī)端必須要考慮的問題，如果將PC端上的大圖放在手機(jī)端，手機(jī)用戶請(qǐng)求圖片文件時(shí)，文件體積大，消耗流量多，請(qǐng)求事件長(zhǎng)，這樣的用戶體驗(yàn)一定不好。所以就得把圖片也處理成響應(yīng)式的，根據(jù)終端類型尺寸分辨率來適配出合理的圖形。

有兩個(gè)解決方案，一個(gè)是看到有文章介紹的W3C的一個(gè)用于響應(yīng)式圖形的草案：新定義標(biāo)簽，因?yàn)槭遣莅缚梢詫W(xué)習(xí)學(xué)習(xí)，這里就不贅述了，自行百度谷歌bing吧~ 另一個(gè)方案是圖片液態(tài)化。

在html頁面中的圖片，可以通過css樣式max-width來進(jìn)行控制圖片的最大寬度

 #wrap img{
    max-width:100%;
    height:auto;
}

id為wrap內(nèi)的圖片會(huì)根據(jù)wrap的寬度改變已達(dá)到等寬擴(kuò)充，height為auto的設(shè)置是為了保證圖片原始的高寬比例，以至于圖片不會(huì)失真。

除了img標(biāo)簽的圖片外我們經(jīng)常會(huì)遇到背景圖片，譬如在id為logo 的 i 標(biāo)簽中設(shè)置背景圖片

#log{
    display:block;
    width:100%;
    height:40px;
    text-indent:55rem;
    background-img:url(logo.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
}

其中關(guān)鍵background-size可以設(shè)置的值有，cover：等比擴(kuò)展圖片來填滿元素；contain：等比縮小圖片來適應(yīng)元素的尺寸。

需要注意的細(xì)節(jié)還有很多，繼續(xù)學(xué)習(xí)繼續(xù)積累。

利用Bootstrap中柵格系統(tǒng)可以簡(jiǎn)單實(shí)現(xiàn)響應(yīng)式布局，這里就需要去理解一下啥是柵格系統(tǒng)

col-md-6 代表在PC端上顯示在一行的6個(gè)柵欄，也就是一半。

col-sm-6 代表在平板上也顯示div占當(dāng)前行的一半。

col-xs-12 代表在手機(jī)端顯示為當(dāng)前行的百分之百填充。

確實(shí)Bootstrap的實(shí)現(xiàn)很簡(jiǎn)單，但是面試過程中，會(huì)有很多面試官傾向于詢問自己該如何實(shí)現(xiàn)響應(yīng)式布局，所以啊，以上的內(nèi)容還是需要多加學(xué)習(xí)理解，框架只是一個(gè)工具。當(dāng)然了，除了以上的方法，還有其他的響應(yīng)式布局實(shí)現(xiàn)方式。