Maison > Article > interface Web > Comment utiliser les nouvelles unités CSS VW et VH dans un design réactif

Comment utiliser les nouvelles unités CSS VW et VH dans un design réactif

高洛峰original: 2017-03-23 10:53:051734parcourir

En tenant compte des futurs développements du responsive design, la hauteur du navigateur peut également être ajustée en fonction de valeurs en pourcentage si vous en avez besoin. Mais utiliser des valeurs basées sur un pourcentage n'est pas toujours le meilleur moyen de définir la taille de la fenêtre du navigateur. Par exemple, la taille de la police ne changera pas à mesure que votre fenêtre change. Désormais, les nouvelles unités introduites dans CSS3 résolvent clairement ce problème. .

Les "vw" et "vh" introduits par css3 sont basés sur la largeur/hauteur par rapport à la taille de la fenêtre, "vw" = "view width", "vh" = "view height" au-dessus de nous ; appeler l'unité de fenêtre autorisée Nous définissons la taille la plus proche de la fenêtre du navigateur. Référez-vous au cas de démonstration pour comparer les styles CSS des quatre conteneurs suivants :

.demo {
   width: 100vw;
   font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */
}
.demo2 {
   width: 80vw;
   font-size: 8vw; /* 宽度为窗口80%， 字体大小为窗口的8% */
}
.demo3 {
   width: 50vw;
   font-size: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */
}
.demo4 {
   width: 10vw;
   height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50% */
}
html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<div class="demo">1</div>
<div class="demo2">2</div>
<div class="demo3">3</div>
<div class="demo4">4</div>
</html>

Vous pouvez réduire la fenêtre de démonstration pour voir les modifications à différentes tailles. Actuellement, cette application CSS3 prend en charge tous les principaux navigateurs et IE doit être supérieur ou égal à 10.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication graphique détaillée du clear float de base CSSArticle suivant：Explication graphique détaillée du clear float de base CSS

Articles Liés

Voir plus