What is the idea of ​​​​implementing elements to adapt to the screen size in css?

Before implementing elements to adapt to the screen size, let’s first introduce a CSS knowledge point. If the values ​​of the margin and padding attributes of

elements (whether they are top and bottom margins or left and right margins) are set to percentages, they are calculated based on the width.

In other words, when the aspect ratio is known, although CSS cannot determine the value of height, it can determine the value of attributes such as padding-top.

Implementation ideas:

1. Calculate the aspect ratio (height/width), and set it to the value of padding-top, and set height to 0 (the height of the element supported by padding-top ).

2. At this time, the actual content of the element is squeezed below, so use absolute positioning to change its position.

(Video tutorial recommendation: css video tutorial)

Implementation code:

html code:

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

css code:

.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;
    }
}

Recommended tutorial: css quick start

The above is the detailed content of What is the idea of ​​​​implementing elements to adapt to the screen size in css?. For more information, please follow other related articles on the PHP Chinese website!