CSS에서 화면 크기에 맞게 요소를 구현한다는 아이디어는 무엇입니까?

화면 크기에 맞게 요소를 구현하기 전에 먼저 CSS 지식 포인트를 소개하겠습니다.

백분율로 설정된 경우 요소의 여백 및 패딩 속성 값(상단 및 하단 여백 또는 왼쪽 및 오른쪽 여백)은 너비를 기준으로 계산됩니다.

즉, 종횡비를 알면 CSS는 height 값을 결정할 수 없지만 padding-top과 같은 속성 값을 결정할 수 있습니다.

구현 아이디어:

1. 가로 세로 비율(높이/너비)을 계산하여 padding-top 값으로 설정하고 높이를 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!