明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

什么是自適應(yīng)布局？自適應(yīng)布局如何完成？

發(fā)表時(shí)間：2023-08-31 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]在前端布局中有一種布局叫自適應(yīng)布局，那么，自適應(yīng)布局是什么意思呢？自適應(yīng)布局又如何實(shí)現(xiàn)？本篇文章將給大家來介紹自適應(yīng)布局的意思以及自適應(yīng)布局的實(shí)現(xiàn)方法。首先我們來看什么是自適應(yīng)布局？所謂自適應(yīng)布局我們從百度上可以搜到如下的定義自適應(yīng)設(shè)計(jì)指能使網(wǎng)頁自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁設(shè)計(jì)方式及技術(shù)。...
在前端布局中有一種布局叫自適應(yīng)布局，那么，自適應(yīng)布局是什么意思呢？自適應(yīng)布局又如何實(shí)現(xiàn)？本篇文章將給大家來介紹自適應(yīng)布局的意思以及自適應(yīng)布局的實(shí)現(xiàn)方法。

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

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

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

頁面的自適應(yīng)布局分為高度自適應(yīng)和寬度自適應(yīng)，實(shí)現(xiàn)方式其實(shí)有挺多的，下面我們就來以三列布局為例來看看自適應(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)布局效果如下：

2345截圖20180927135634.png

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

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

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

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

說明：針對(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)布局效果如下：

2345截圖20180927140338.png

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

說明：中間一列優(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)布局效果如下：

2345截圖20180927140338.png

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

說明：中間列設(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)布局效果如下：

2345截圖20180927140338.png

最后：

本篇文章帶到這里就結(jié)束了關(guān)于自適應(yīng)布局若想認(rèn)識(shí)更多可以看看2018年最新的8個(gè)響應(yīng)式與自適應(yīng)視頻教程推薦，里面有最新的免費(fèi)視頻教程可以觀看。

以上就是什么是自適應(yīng)布局？自適應(yīng)布局如何實(shí)現(xiàn)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。