什麼是自適應佈局？自適應佈局如何實現？-html教學-PHP中文網

首頁

web前端

html教學

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

不言

Sep 27, 2018 pm 02:18 PM

自適應佈局

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

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

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

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

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

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

#高度自適應就是將每個模組設定為絕對定位，然後設定中間自適應的模組的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

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles