Was ist die Idee, Elemente zur Anpassung an die Bildschirmgröße in CSS zu implementieren?

Bevor wir Elemente zur Anpassung an die Bildschirmgröße implementieren, stellen wir zunächst einen CSS-Wissenspunkt vor. Wenn die Werte der Rand- und Polsterattribute von

-Elementen (sei es obere und untere Ränder oder linke und rechte Ränder) auf Prozentsätze festgelegt sind, werden sie basierend auf der Breite berechnet.

Mit anderen Worten: Wenn das Seitenverhältnis bekannt ist, kann CSS zwar den Wert der Höhe nicht bestimmen, aber den Wert von Attributen wie padding-top.

Implementierungsideen:

1. Berechnen Sie das Seitenverhältnis (Höhe/Breite) und setzen Sie es auf den Wert von padding-top und setzen Sie die Höhe auf 0 (die Höhe des Elements, das von unterstützt wird). Polsterung oben).

2. Zu diesem Zeitpunkt wird der tatsächliche Inhalt des Elements unten komprimiert. Verwenden Sie daher die absolute Positionierung, um seine Position zu ändern.

(Empfohlenes Video-Tutorial: CSS-Video-Tutorial)

Implementierungscode:

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

Empfohlenes Tutorial: CSS-Schnellstart

Das obige ist der detaillierte Inhalt vonWas ist die Idee, Elemente zur Anpassung an die Bildschirmgröße in CSS zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!