溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

前端開(kāi)發(fā)怎么實(shí)現(xiàn)自適應(yīng)布局

發(fā)布時(shí)間：2020-09-14 11:53:39 來(lái)源：億速云 閱讀：3717 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下前端開(kāi)發(fā)怎么實(shí)現(xiàn)自適應(yīng)布局，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

首先我們來(lái)看什么是自適應(yīng)布局？

所謂自適應(yīng)布局我們從百度上可以搜到如下的定義自適應(yīng)設(shè)計(jì)指能使網(wǎng)頁(yè)自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁(yè)設(shè)計(jì)方式及技術(shù)。簡(jiǎn)單的來(lái)說(shuō)自適應(yīng)就是讓同一個(gè)頁(yè)面自動(dòng)適應(yīng)不同大小的設(shè)備，從而解決為不同設(shè)備提供不同版本的頁(yè)面問(wèn)題。

知道了自適應(yīng)布局是怎么一回事后，那么我們就來(lái)看一看自適應(yīng)布局該如何實(shí)現(xiàn)？

頁(yè)面的自適應(yīng)布局分為高度自適應(yīng)和寬度自適應(yīng)，實(shí)現(xiàn)方式其實(shí)有挺多的，下面我們就來(lái)以三列布局為例來(lái)看看自適應(yīng)布局的實(shí)現(xiàn)方式。

一、自適應(yīng)布局之高度自適應(yīng)

高度自適應(yīng)就是把每個(gè)模塊設(shè)置為絕對(duì)定位，然后設(shè)置中間自適應(yīng)的模塊的top和bottom屬性的值分別為頭部模塊和底部模塊的高，然后中間模塊的高度就自適應(yīng)了。

高度自適應(yīng)布局代碼如下：

<body>
        <div class="top">120px</div>
        <div class="main">自適應(yīng)</div>
        <div class="bottom">120px</div>
</body>
.top{
    width: 100%;
    height: 120px;
    position: absolute;
    background-color: greenyellow;
    
}
.main{
    position: absolute;
    width: 100%;
    top: 120px;
    bottom: 120px;
    background-color: pink;
    height: auto;
}
.bottom{
    position: absolute;
    bottom: 0;//別漏了
    width: 100%;
    height: 120px;
    background-color:greenyellow ;
}

高度自適應(yīng)布局效果如下：

前端開(kāi)發(fā)怎么實(shí)現(xiàn)自適應(yīng)布局

二、自適應(yīng)布局之寬度自適應(yīng)

寬度自適應(yīng)有三種方法，分別是用絕對(duì)定位；利用margin，中間模塊先渲染；自身浮動(dòng)。

下面我們來(lái)分別看看這三種方法實(shí)現(xiàn)的自適應(yīng)布局（三列）

1、利用絕對(duì)定位來(lái)設(shè)置寬度自適應(yīng)布局

說(shuō)明：針對(duì)自適應(yīng)模塊使用絕對(duì)定位，在把left和right設(shè)置為左右兩列的寬，其實(shí)原理和高度自適應(yīng)一樣，另外左右兩列分別左右浮動(dòng)。

絕對(duì)定位設(shè)置寬度自適應(yīng)布局代碼如下：

<body>
        <div class="left">200px</div>
        <div class="main">自適應(yīng)</div>
        <div class="right">200px</div>
</body>
html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}

.left,
.right {
    width: 200px;
    display: inline;
    height: 100%;
    background-color: greenyellow;
}

.left {
    float: left;
}

.right {
    float: right;
}

.main {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 100%;
    background-color: pink;
    display: inline;
}

寬度自適應(yīng)布局效果如下：

前端開(kāi)發(fā)怎么實(shí)現(xiàn)自適應(yīng)布局

2、利用margin，中間模塊先渲染來(lái)設(shè)置寬度自適應(yīng)布局

說(shuō)明：中間一列優(yōu)先渲染的自適應(yīng)三列布局，優(yōu)先渲染（加載）的關(guān)鍵：內(nèi)容在html里面必須放在前面。自適應(yīng)的div必須放在left和right前面且包含在一個(gè)父div里。父div，left和right模塊都向左浮動(dòng)，然后對(duì)自適應(yīng)的div（就是父div里的子div）設(shè)置margin：0 200px，然后對(duì)left的margin-left的屬性值設(shè)置為100%的負(fù)數(shù)，就是margin-left：-100%；對(duì)right的margin-left的屬性值設(shè)置為自身寬度的負(fù)數(shù)，就是margin-left：-200px。

注意：自適應(yīng)的div必須放在left和right前面且包含在一個(gè)父div里。

利用margin，中間模塊先渲染設(shè)置寬度自適應(yīng)布局的代碼如下：

<body>
        <div class="main"> <!--看清楚，這里用一個(gè)父div包住-->
            <div class="content">自適應(yīng)</div>
        </div>
        <div class="left">200px</div>
        <div class="right">200px</div>
</body>
html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    width: 100%;
    height: 100%;
    float: left;
}
.main .content {
    margin: 0 200px;
    background-color: pink;
    height: 100%;
}
.left,
.right {
    width: 200px;
    height: 100%;
    float: left;
    background-color: greenyellow;
}
.left {
    margin-left: -100%; //important
}
.right {
    margin-left: -200px; //important
}

寬度自適應(yīng)布局效果如下：

前端開(kāi)發(fā)怎么實(shí)現(xiàn)自適應(yīng)布局

3、利用自身浮動(dòng)來(lái)設(shè)置寬度自適應(yīng)布局

說(shuō)明：中間列設(shè)置margin屬性，就是把左右列分別左右浮動(dòng)。注意：使用這個(gè)方法布局自適應(yīng)的話，必須把自適應(yīng)的那一列在html中放在left和right后面。

利用自身浮動(dòng)設(shè)置寬度自適應(yīng)布局代碼如下：

<body>        
        <div class="left">200px</div>
        <div class="right">200px</div>
        <div class="main">自適應(yīng)</div>
</body>
html,
body {
    margin: 0;
    height: 100%;
    padding: 0;
    font-size: 30px;
    font-weight: 500;
    text-align: center;
}
.main {
    margin: 0 200px;
    height: 100%;
    background-color: pink;
}
.left,
.right {
    width: 200px;
    height: 100%;
    background-color: greenyellow;
}
.left {
    float: left;
}
.right {
    float: right;
}

寬度自適應(yīng)布局效果如下：

前端開(kāi)發(fā)怎么實(shí)現(xiàn)自適應(yīng)布局

看完了這篇文章，相信你對(duì)前端開(kāi)發(fā)怎么實(shí)現(xiàn)自適應(yīng)布局有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手