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

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

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

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

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

這里視口的設(shè)置需要注意的是，視口就是可見的屏幕尺寸；設(shè)置視口時只設(shè)置寬度，而不在乎高度，這是因為高度由內(nèi)容自動撐開。

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

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

1、style標簽中的media屬性

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

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

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

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

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

body{ background: blue; } 

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

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

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

那么在head中寫入

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

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

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

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

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

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

1、兼容性問題

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

2、字體尺寸單位

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

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、圖片的處理

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

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

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

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

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

除了img標簽的圖片外我們經(jīng)常會遇到背景圖片，譬如在id為logo 的 i 標簽中設(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：等比擴展圖片來填滿元素；contain：等比縮小圖片來適應(yīng)元素的尺寸。

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

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

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

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

col-xs-12 代表在手機端顯示為當前行的百分之百填充。

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