溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css如何實現自適布局”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css如何實現自適布局”這篇文章吧。
自適布局指相對視窗任何尺寸都能占據特定百分比的占位布局。自適布局的容器都是根據視窗尺寸計算，即使父節點或祖先節點的尺寸發生變化也不會影響自適布局的容器尺寸。
搭建自適布局就離不開視窗比例單位。在CSS3里增加了與viewport相關的四個長度單位，隨著時間推移，目前大部分瀏覽器對這四個長度單位都有較好的兼容性，這也是未來最建議在伸縮方案里使用的長度單位。
1vw表示1%視窗寬度
1vh表示1%視窗高度
1vmin表示1%視窗寬度和1%視窗高度里最小者
1vmax表示1%視窗寬度和1%視窗高度里最大者
視窗寬高在JS里分別對應window.innerWdith和window.innerHeight。若不考慮低版本瀏覽器兼容性，完全可用一行CSS代碼秒殺所有移動端的伸縮方案。
/* 基于UI width=750px DPR=2的網頁 */
html {
font-size: calc(100vw / 7.5);
}上述代碼使用calc()實現font-size的動態計算。calc()是自適布局里的核心存在，無它就不能愉快地實現自適布局所有動態計算了。
calc()用于動態計算單位，數值、長度、角度、時間和百分比都能作為參數。由于執行數學表達式后返回運算后的計算值，所以可減少大量人工計算甚至無需人工計算。
calc()饑不擇食，所有計量單位都能作為參數參加整個動態計算。
數值：整數、浮點數
長度：px、em、rem、vw、vh等
角度：deg、turn
時間：s、ms
百分比：%
calc()雖然好用，但新手難免會遇到一些坑，謹記以下特點，相信就能玩轉calc()了。
四則運算：只能使用+、-、*、/作為運算符號
運算順序：遵循加減乘除運算順序，可用()提升運算等級
符號連接：每個運算符號必須使用空格間隔起來
混合計算：可混合不同計量單位動態計算
第三點尤為重要，若未能遵守，瀏覽器直接忽略該屬性。
上述font-size:calc(100vw / 7.5)其實就是根據設計圖與瀏覽器視窗的比例動態計算<html>的font-size：100/750 = x/100vw。
在SPA里有遇過因為有滾動條或無滾動條而導致頁面路由在跳轉過程里發生向左或向右的抖動嗎？這讓強迫癥患者很難受，此時可用calc()巧妙解決該問題。
.elem {
padding-right: calc(100vw - 100%);
}不直接聲明padding-right為滾動條寬度是因為每個瀏覽器的默認滾動條寬度都可能不一致。100vw是視窗寬度，100%內容寬度，那么100vw - 100%就是滾動條寬度，聲明padding-right用于保留滾動條出現的位置，這樣滾動條出不出現都不會讓頁面抖動了。
有了calc()做保障就可迅速實現一些與視窗尺寸相關的布局了。例如實現一個視窗寬度都為50%的彈窗。
<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;
}
}當然使用calc()也不一定結合視窗比例單位計算。例如自適布局已知部分節點高度，不想手動計算最后節點高度但又想其填充布局剩余空間。
<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如何實現自適布局”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
