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:051676parcourir
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!