Quelle est l’idée d’implémenter des éléments pour s’adapter à la taille de l’écran en CSS ?

Avant d'implémenter des éléments pour s'adapter à la taille de l'écran, introduisons d'abord un point de connaissance CSS. Si les valeurs des attributs margin et padding de l'élément

(qu'il s'agisse des marges supérieure et inférieure ou des marges gauche et droite) sont définies en pourcentages, elles sont calculées en fonction de la largeur .

En d'autres termes, lorsque le rapport hauteur/largeur est connu, bien que CSS ne puisse pas déterminer la valeur de la hauteur, il peut déterminer la valeur d'attributs tels que padding-top.

Idées d'implémentation :

1. Calculez le rapport hauteur/largeur (hauteur/largeur), définissez-le sur la valeur de padding-top et définissez la hauteur sur 0 (la hauteur de l'élément pris en charge). par padding-top ).

2. À ce stade, le contenu réel de l'élément est compressé en dessous, utilisez donc le positionnement absolu pour changer sa position.

(Tutoriel vidéo recommandé : tutoriel vidéo CSS)

Code d'implémentation :

code html :

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

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

Tutoriel recommandé : démarrage rapide CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!