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快速入門

#

以上是css實作元素自適應螢幕大小的思路是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！