Explication détaillée de la nouvelle unité (vw) en CSS3

Unité vw CSS3

Paste_Image.png

100vw = 100 % de largeur de fenêtre
100vh = 100 % de hauteur de fenêtre

Il sera assez simple d'implémenter un carré adaptatif (conteneur aux proportions fixes) de cette manière !

[lang=stylus]
.box
  width 10vw
  height 10vw

Comme il s'agit d'une nouvelle unité, il y aura inévitablement des problèmes de compatibilité.

[lang=jade]
.img-box
  img(src="img/a.png")

[lang=stylus]
.img-box
  width 10vw
  height 10vw
  img
    width 100%
    height 100%
    object-fit cover

Paste_Image.png

L'effet normal du code doit être celui indiqué à gauche, qui consiste à mettre un image<🎜 dans une boîte carrée >, centrage adaptatif Cependant, sur les téléphones Android 4.4, l'image sera déformée et la hauteur n'est pas calculée par .img-box, comme le montre l'image de droite (
n'est également pas valide sous Android 4.4) object-fit cover

Par hasard, j'ai trouvé que le problème d'erreur de hauteur peut être résolu en définissant <a href="http://www.php.cn/wiki /902.html" target="_blank">position<p> absolue pour l'image ( <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> absolute Invalide)object-fit cover

[lang=stylus]
.img-box
  width 10vw
  height 10vw
  position relative
  img
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    object-fit cover

css3 nouveau

flex vw fait la mise en page plus flexible et pratique vhLe carré n'est plus utilisé
Une méthode facile à voir et à comprendre padding-bottom 100%

Enfin, j'espère que tout le monde utilisera davantage Chrome et se débarrassera d'IE dès que possible. que possible

[Recommandations associées]

1.

Tutoriel vidéo CSS en ligne gratuit

2.

Manuel CSS en ligne

3.

php.cn Dugu Jiujian (2) - tutoriel vidéo 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!