溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css如何實(shí)現(xiàn)自適布局

發(fā)布時(shí)間：2022-03-19 15:30:34 來源：億速云 閱讀：234 作者：小新 欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了“css如何實(shí)現(xiàn)自適布局”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何實(shí)現(xiàn)自適布局”這篇文章吧。

自適布局

自適布局指相對(duì)視窗任何尺寸都能占據(jù)特定百分比的占位布局。自適布局的容器都是根據(jù)視窗尺寸計(jì)算，即使父節(jié)點(diǎn)或祖先節(jié)點(diǎn)的尺寸發(fā)生變化也不會(huì)影響自適布局的容器尺寸。

搭建自適布局就離不開視窗比例單位。在CSS3里增加了與viewport相關(guān)的四個(gè)長(zhǎng)度單位，隨著時(shí)間推移，目前大部分瀏覽器對(duì)這四個(gè)長(zhǎng)度單位都有較好的兼容性，這也是未來最建議在伸縮方案里使用的長(zhǎng)度單位。

  • 1vw表示1%視窗寬度

  • 1vh表示1%視窗高度

  • 1vmin表示1%視窗寬度和1%視窗高度里最小者

  • 1vmax表示1%視窗寬度和1%視窗高度里最大者

視窗寬高在JS里分別對(duì)應(yīng)window.innerWdith和window.innerHeight。若不考慮低版本瀏覽器兼容性，完全可用一行CSS代碼秒殺所有移動(dòng)端的伸縮方案。

/* 基于UI width=750px DPR=2的網(wǎng)頁 */
html {
    font-size: calc(100vw / 7.5);
}

上述代碼使用calc()實(shí)現(xiàn)font-size的動(dòng)態(tài)計(jì)算。calc()是自適布局里的核心存在，無它就不能愉快地實(shí)現(xiàn)自適布局所有動(dòng)態(tài)計(jì)算了。

calc()用于動(dòng)態(tài)計(jì)算單位，數(shù)值、長(zhǎng)度、角度、時(shí)間和百分比都能作為參數(shù)。由于執(zhí)行數(shù)學(xué)表達(dá)式后返回運(yùn)算后的計(jì)算值，所以可減少大量人工計(jì)算甚至無需人工計(jì)算。

calc()饑不擇食，所有計(jì)量單位都能作為參數(shù)參加整個(gè)動(dòng)態(tài)計(jì)算。

  • 數(shù)值：整數(shù)、浮點(diǎn)數(shù)

  • 長(zhǎng)度：px、em、rem、vw、vh等

  • 角度：deg、turn

  • 時(shí)間：s、ms

  • 百分比：%

calc()雖然好用，但新手難免會(huì)遇到一些坑，謹(jǐn)記以下特點(diǎn)，相信就能玩轉(zhuǎn)calc()了。

  • 四則運(yùn)算：只能使用+、-、*、/作為運(yùn)算符號(hào)

  • 運(yùn)算順序：遵循加減乘除運(yùn)算順序，可用()提升運(yùn)算等級(jí)

  • 符號(hào)連接：每個(gè)運(yùn)算符號(hào)必須使用空格間隔起來

  • 混合計(jì)算：可混合不同計(jì)量單位動(dòng)態(tài)計(jì)算

第三點(diǎn)尤為重要，若未能遵守，瀏覽器直接忽略該屬性。

上述font-size:calc(100vw / 7.5)其實(shí)就是根據(jù)設(shè)計(jì)圖與瀏覽器視窗的比例動(dòng)態(tài)計(jì)算<html>的font-size：100/750 = x/100vw。

在SPA里有遇過因?yàn)橛袧L動(dòng)條或無滾動(dòng)條而導(dǎo)致頁面路由在跳轉(zhuǎn)過程里發(fā)生向左或向右的抖動(dòng)嗎？這讓強(qiáng)迫癥患者很難受，此時(shí)可用calc()巧妙解決該問題。

.elem {
    padding-right: calc(100vw - 100%);
}

不直接聲明padding-right為滾動(dòng)條寬度是因?yàn)槊總€(gè)瀏覽器的默認(rèn)滾動(dòng)條寬度都可能不一致。100vw是視窗寬度，100%內(nèi)容寬度，那么100vw - 100%就是滾動(dòng)條寬度，聲明padding-right用于保留滾動(dòng)條出現(xiàn)的位置，這樣滾動(dòng)條出不出現(xiàn)都不會(huì)讓頁面抖動(dòng)了。

有了calc()做保障就可迅速實(shí)現(xiàn)一些與視窗尺寸相關(guān)的布局了。例如實(shí)現(xiàn)一個(gè)視窗寬度都為50%的彈窗。

css如何實(shí)現(xiàn)自適布局

<div class="modal">
    <div class="modal-wrapper"></div>
</div>
.modal {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .5);
    &-wrapper {
        width: 50vw;
        height: 200px;
        background-color: #f66;
    }
}

當(dāng)然使用calc()也不一定結(jié)合視窗比例單位計(jì)算。例如自適布局已知部分節(jié)點(diǎn)高度，不想手動(dòng)計(jì)算最后節(jié)點(diǎn)高度但又想其填充布局剩余空間。

css如何實(shí)現(xiàn)自適布局

<ul class="selfadaption-layout">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</ul>
.selfadaption-layout {
    width: 200px;
    height: 567px;
    .box-1 {
        height: 123px;
        background-color: #f66;
    }
    .box-2 {
        height: 15%;
        background-color: #3c9;
    }
    .box-3 {
        height: calc(100% - 123px - 15%);
        background-color: #09f;
    }
}

以上是“css如何實(shí)現(xiàn)自適布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手