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

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括渾南網(wǎng)站建設(shè)、渾南網(wǎng)站制作、渾南網(wǎng)頁制作以及渾南網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，渾南網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到渾南省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

所謂自適應(yīng)布局我們從百度上可以搜到如下的定義自適應(yīng)設(shè)計(jì)指能使網(wǎng)頁自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁設(shè)計(jì)方式及技術(shù)。簡單的來說自適應(yīng)就是讓同一個(gè)頁面自動適應(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è)置為絕對定位，然后設(shè)置中間自適應(yīng)的模塊的top和bottom屬性的值分別為頭部模塊和底部模塊的高，然后中間模塊的高度就自適應(yīng)了。

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

        
120px
        
自適應(yīng)
        
120px

.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)布局效果如下：

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

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

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

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

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

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

        
200px
        
自適應(yīng)
        
200px

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)布局效果如下：

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模塊都向左浮動，然后對自適應(yīng)的div（就是父div里的子div）設(shè)置margin：0 200px，然后對left的margin-left的屬性值設(shè)置為100%的負(fù)數(shù)，就是margin-left：-100%；對right的margin-left的屬性值設(shè)置為自身寬度的負(fù)數(shù)，就是margin-left：-200px。

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

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

        
 
            
自適應(yīng)
        
        
200px
        
200px

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)布局效果如下：

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

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

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

        
        
200px
        
200px
        
自適應(yīng)

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)布局效果如下：

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