日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

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

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

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

設置 meta 標簽

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

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

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

媒體查詢

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

關于媒體查詢有以下三種實現(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 導入，示例代碼如下：

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

3、在 link 標簽中使用，示例代碼如下：

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

下面通過一個綜合的示例來演示一下響應式布局的實現(xiàn)：

    
        
        
        
           
    
    
        

            

                

                    
header1
                    
header2
                    
header2
                    
header2
                    
header2
                
                
icon
            
            

                

                    left
                
                

                    center
                
                

                    right
                
            
            
        
    

當瀏覽器窗口小于 1200 像素大于 980 像素時，頁面的樣式如下圖所示：

當瀏覽器窗口大于 640 像素小于 980 像素時，頁面的樣式如下圖所示：

當瀏覽器窗口小于 640 像素時，頁面的樣式如下圖所示：