CSS 響應(yīng)式布局也稱自適應(yīng)布局，是 Ethan Marcotte 在 2010 年 5 月份提出的一個(gè)概念，簡單來講就是一個(gè)網(wǎng)站能夠兼容多個(gè)不同的終端（設(shè)備），而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)端瀏覽網(wǎng)頁而誕生的。響應(yīng)式布局能夠?yàn)槭褂貌煌K端的用戶提供很好的用戶體驗(yàn)，而且隨著大屏智能手機(jī)的普及，用“大勢所趨”來形容也不為過。

成都創(chuàng)新互聯(lián)自2013年起，先為開平等服務(wù)建站，開平等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為開平企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

要實(shí)現(xiàn)響應(yīng)式布局，常用的方式有以下幾種：

• 使用 CSS 中的媒體查詢（最簡單）；
• 使用 JavaScript（使用成本比較高）；
• 使用第三方開源框架（例如 bootstrap，可以很好的支持各種瀏覽器）。

接下來我們以媒體查詢?yōu)槔齺砭唧w演示一下響應(yīng)式布局的實(shí)現(xiàn)。

設(shè)置 meta 標(biāo)簽

首先，我們需要設(shè)置 meta 標(biāo)簽來告訴瀏覽器，讓視口（網(wǎng)頁的可視區(qū)域）的寬度等于設(shè)備的寬度，并禁止用戶對頁面的縮放，如下所示：

在設(shè)置視口時(shí)需要注意，視口就是網(wǎng)頁可見區(qū)域的尺寸，設(shè)置視口時(shí)只設(shè)置寬度就行，不用在乎高度，具體高度由網(wǎng)頁內(nèi)容自動(dòng)撐開。上面 meta 標(biāo)簽中內(nèi)容的含義如下：

• viewport：即視口，表示網(wǎng)頁的可視區(qū)域；
• width：控制 viewport 的大小，可以指定一個(gè)具體的值，例如 600，也可以是由關(guān)鍵字組成的特殊值，例如 device-width 就表示設(shè)備的寬度；
• initial-scale：表示初始縮放比例，也就是頁面第一次加載時(shí)的縮放比例；
• maximum-scale：表示允許用戶縮放的最大比例，范圍從 0 到 10.0；
• minimum-scale：表示允許用戶縮放到最小比例，范圍從 0 到 10.0；
• user-scalable：表示用戶是否可以手動(dòng)縮放，“yes”表示允許縮放，“no”表示禁止縮放。

媒體查詢

CSS 媒體查詢可以根據(jù)指定的條件，針對不同的媒體類型（screen print）定義不同的 CSS 樣式，讓使用不同設(shè)備的用戶都能得到最佳的體驗(yàn)。

關(guān)于媒體查詢有以下三種實(shí)現(xiàn)方式：

1、直接在 CSS 文件中使用，示例代碼如下：

@media (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}
@media (min-width: 321px) and (max-width: 375px) {
    /*321~768*/
    body {
        background: red;
    }
}
@media (min-width: 376px) and (max-width: 425px) {
    /*376~425*/
    body {
        background: yellow;
    }
}
@media (min-width: 426px) and (max-width: 768px) {
    /*426~768*/
    body {
        background: blue;
    }
}
@media (min-width: 769px) {
    /*769~+∞*/
    body {
        background: green;
    }
}

2、使用 @import 導(dǎo)入，示例代碼如下：

@import 'index01.css' screen and (max-width:1024px) and (min-width:720px)
@import 'index02.css' screen and (max-width:720px)

3、在 link 標(biāo)簽中使用，示例代碼如下：

更多關(guān)于媒體查詢的介紹大家可以查閱《CSS媒體查詢》一節(jié)。

下面通過一個(gè)綜合的示例來演示一下響應(yīng)式布局的實(shí)現(xiàn)：

    
        
        
        
           
    
    
        

            

                

                    
header1
                    
header2
                    
header2
                    
header2
                    
header2
                
                
icon
            
            

                

                    left
                
                

                    center
                
                

                    right
                
            
            
        
    

當(dāng)瀏覽器窗口小于 1200 像素大于 980 像素時(shí)，頁面的樣式如下圖所示：

當(dāng)瀏覽器窗口大于 640 像素小于 980 像素時(shí)，頁面的樣式如下圖所示：

當(dāng)瀏覽器窗口小于 640 像素時(shí)，頁面的樣式如下圖所示：