css實現元素自適應屏幕大小的思路是什么

在實現元素自適應屏幕大小之前，我們先來介紹一個css知識點。

元素的margin和padding屬性的值（無論是上下邊距還是左右邊距）如果設置為百分比，都是以寬度為基準計算的。

也就是說，在已知寬高比的情況下，css雖然不能確定height的值，但是可以確定padding-top等屬性的值。

實現思路：

1、算出寬高比（高 / 寬），并設置為padding-top的值，height設置為0（由padding-top撐起元素的高度）。

2、此時元素的實際內容被擠到了下方，所以用絕對定位改變其位置。

（視頻教程推薦：css視頻教程）

實現代碼：

html代碼：

<div class="ac_coupon-wrap">     <div class="ac_coupon-content">         <!-- 內容 -->     </div> </div>

css代碼：

.ac_coupon-wrap {     height: 0;     padding-top: 15.16%;     position: relative;     .ac_coupon-content {         position: absolute;         top: 0;         width: 100%;         height: 100%;         background-size: cover;     } }

推薦教程：css快速入門