什麼是自適應佈局？自適應佈局如何實現？-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，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles