首頁 >web前端 >html教學 >什麼是自適應佈局？自適應佈局如何實現？

什麼是自適應佈局？自適應佈局如何實現？

不言原創: 2018-09-27 14:18:0132784瀏覽

在前端佈局中有一種佈局叫做自適應佈局，那麼，自適應佈局是什麼意思呢？自適應佈局又如何實現？本篇文章將給大家介紹自適應佈局的意思以及自適應佈局的實現方法。

首先我們來看什麼是自適應佈局？

所謂自適應佈局我們從百度上可以搜到如下的定義自適應設計指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。簡單的來說自適應就是讓同一個頁面自動適應不同大小的設備，從而解決為不同設備提供不同版本的頁面問題。

知道了自適應佈局是怎麼一回事後，那麼我們就來看一看自適應佈局該如何實現？

頁面的自適應佈局分為高度自適應和寬度自適應，實現方式其實有挺多的，下面我們就來以三列佈局為例來看看自適應佈局的實現方式。

一、自適應佈局之高度自適應

#高度自適應就是將每個模組設定為絕對定位，然後設定中間自適應的模組的top和bottom屬性的值分別為頭部模組和底部模組的高，然後中間模組的高度就自適應了。

高度自適應佈局程式碼如下：

<body>
        <div class="top">120px</div>
        <div class="main">自适应</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 ;
}

高高度自適應佈局效果如下：

什麼是自適應佈局？自適應佈局如何實現？

二、自適應佈局之寬度自適應

寬度自適應有三種方法，分別是用絕對定位；利用margin，中間模組先渲染；自身浮動。

以下我們來分別看看這三種方法實作的自適應佈局（三列）

1、利用絕對定位來設定寬度自適應佈局

說明：針對自適應模組使用絕對定位，在把left和right設定為左右兩列的寬，其實原理和高度自適應一樣，另外左右兩列分別左右浮動。

絕對定位設定寬度自適應佈局程式碼如下：

<body>
        <div class="left">200px</div>
        <div class="main">自适应</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;
}

寬度自適應佈局效果如下：

什麼是自適應佈局？自適應佈局如何實現？

2、利用margin，中間模組先渲染來設定寬度自適應佈局

說明：中間一列優先渲染的自適應三列佈局，優先渲染（載入）的關鍵：內容在html裡面必須放在前面。自適應的div必須放在left和right前面且包含在一個父親div裡。父div，left和right模組都向左浮動，然後對自適應的div（就是父div裡的子div）設定margin：0 200px，然後對left的margin-left的屬性值設定為100%的負數，是margin-left：-100%；對right的margin-left的屬性值設定為自身寬度的負數，就是margin-left：-200px。

注意：自適應的div必須放在left和right前面且包含在一個父div裡。

使用margin，中間模組先渲染設定寬度自適應佈局的程式碼如下：

#

<body>
        <div class="main"> <!--看清楚，这里用一个父div包住-->
            <div class="content">自适应</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
}

寬度自適應佈局效果如下：

3、利用自身浮動來設定寬度自適應佈局

說明：中間列設置margin屬性，就是把左右列分別左右浮動。注意：使用這個方法佈局自適應的話，必須把自適應的那一列在html中放在left和right後面。

利用自身浮動設定寬度自適應佈局程式碼如下：

<body>        
        <div class="left">200px</div>
        <div class="right">200px</div>
        <div class="main">自适应</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;
}

寬度自適應佈局效果如下：

最後：

這篇文章帶到這裡就結束了關於自適應版面若想認識更多可以看看2018年最新的8個響應式與自適應影片教學推薦，裡面有最新的免費影片教學可以觀看。

以上是什麼是自適應佈局？自適應佈局如何實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：什麼是響應式？響應式佈局的詳細介紹下一篇：什麼是響應式？響應式佈局的詳細介紹

相關文章

看更多