css3自適應(yīng)布局如何實(shí)現(xiàn)

這篇文章主要介紹“css3自適應(yīng)布局如何實(shí)現(xiàn)”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3自適應(yīng)布局如何實(shí)現(xiàn)”文章能幫助大家解決問(wèn)題。

專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鐘山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

自適應(yīng)布局又稱(chēng)“響應(yīng)式布局”，是指可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)布局；這樣的網(wǎng)頁(yè)能夠兼容多個(gè)不同的終端，而不是為每個(gè)終端做一個(gè)特定的版本。自適應(yīng)布局是為解決移動(dòng)端瀏覽網(wǎng)頁(yè)而誕生的，能夠?yàn)槭褂貌煌K端的用戶提供很好的用戶體驗(yàn)。

css3自適應(yīng)布局如何實(shí)現(xiàn)

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

什么是自適應(yīng)布局

自適應(yīng)布局又稱(chēng)“響應(yīng)式布局”，可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)布局，簡(jiǎn)單來(lái)講就是網(wǎng)頁(yè)能夠兼容多個(gè)不同的終端（設(shè)備），而不是為每個(gè)終端做一個(gè)特定的版本。

其實(shí)簡(jiǎn)單來(lái)講自適應(yīng)與非自適應(yīng)的不同就是一個(gè)頁(yè)面不管在什么設(shè)備的分辨率下都能自動(dòng)識(shí)別適應(yīng)，為瀏覽的用戶帶來(lái)了更好的體驗(yàn)效果。

這個(gè)概念是為解決移動(dòng)端瀏覽網(wǎng)頁(yè)而誕生的。自適應(yīng)布局能夠?yàn)槭褂貌煌K端的用戶提供很好的用戶體驗(yàn)，而且隨著大屏智能手機(jī)的普及，用“大勢(shì)所趨”來(lái)形容也不為過(guò)。

css3實(shí)現(xiàn)自適應(yīng)布局的方法

常用的方式有以下幾種：

  • 使用 CSS 中的媒體查詢（最簡(jiǎn)單）；

  • 使用 JavaScript（使用成本比較高）；

  • 使用第三方開(kāi)源框架（例如 bootstrap，可以很好的支持各種瀏覽器）。

接下來(lái)我們以媒體查詢?yōu)槔齺?lái)具體演示一下自適應(yīng)布局的實(shí)現(xiàn)。

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

  • viewport：即視口，表示網(wǎng)頁(yè)的可視區(qū)域；

  • width：控制 viewport 的大小，可以指定一個(gè)具體的值，例如 600，也可以是由關(guān)鍵字組成的特殊值，例如 device-width 就表示設(shè)備的寬度；

  • initial-scale：表示初始縮放比例，也就是頁(yè)面第一次加載時(shí)的縮放比例；

  • maximum-scale：表示允許用戶縮放的最大比例，范圍從 0 到 10.0；

  • minimum-scale：表示允許用戶縮放到最小比例，范圍從 0 到 10.0；

  • user-scalable：表示用戶是否可以手動(dòng)縮放，“yes”表示允許縮放，“no”表示禁止縮放。

2、媒體查詢

CSS 媒體查詢可以根據(jù)指定的條件，針對(duì)不同的媒體類(lèi)型（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)簽中使用，示例代碼如下：

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自適應(yīng)布局（響應(yīng)式布局）</title>
        <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
        <style>
            *{
                margin: 0px;
                padding: 0px;
                font-family: "微軟雅黑";
            }
            #head, #foot, #main
            {
                height: 100px;
                width: 1200px;
                /*width: 85%;*/
                background-color: goldenrod;
                text-align: center;
                font-size: 48px;
                line-height: 100px;
                margin: 0 auto;
            }
            #head div{
                display: none;
                font-size: 20px;
                height: 30px;
                width: 100px;
                background-color: green;
                float: right;
                line-height: 30px;
                margin-top: 35px;
            }
            #head ul{
                width: 80%;
            }
            #head ul li{
                width: 20%;
                float: left;
                text-align: center;
                list-style: none;font-size: 20px;
            }
            #main{
                height: auto;
                margin: 10px auto;
                overflow: hidden;
            }
            .left, .center, .right{
                height: 600px;
                line-height: 600px;
                float: left;
                width: 20%;
                background-color: red
            }
            .center{
                width: 60%;
                border-left: 10px solid #FFF;
                border-right: 10px solid #FFF;
                box-sizing: border-box;
            }
            @media only screen and (max-width: 1200px) {
                #head, #foot, #main{
                width: 100%;
                }
            }
            @media only screen and (max-width: 980px) {
                .right{
                    display: none;
                }
                .left{
                    width: 30%;
                }
                .center{
                    width: 70%;
                    border-right: hidden;
                }
            }
            @media only screen and (max-width: 640px) {
                .left, .center, .right{
                    width: 100%;
                    display: block;
                    height: 200px;
                    line-height: 200px;
                }
                .center{
                    border: hidden;
                    border-top: 10px  solid #FFFFFF;
                    border-bottom: 10px solid #FFFFFF;
                    height: 600px;
                    line-height: 600px;
                }
                #head ul{
                    display: none;
                }
                #head div{
                    display: block;
                }
            }
        </style>   
    </head>
    <body>
        <div>
            <header id="head">
                <ul>
                    <li>header1</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                </ul>
                <div>icon</div>
            </header>
            <section id="main">
                <div class="left">
                    left
                </div>
                <div class="center">
                    center
                </div>
                <div class="right">
                    right
                </div>
            </section>
            <footer id="foot">
                footer
            </footer>
        </div>
    </body>
</html>

當(dāng)瀏覽器窗口小于 1200 像素大于 980 像素時(shí)，和大于 640 像素小于 980 像素時(shí)的樣式是不同的

css3自適應(yīng)布局如何實(shí)現(xiàn)

關(guān)于“css3自適應(yīng)布局如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

文章名稱(chēng)：css3自適應(yīng)布局如何實(shí)現(xiàn)
標(biāo)題URL：http://bm7419.com/article16/psdegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、虛擬主機(jī)、微信小程序、網(wǎng)站改版、小程序開(kāi)發(fā)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名