Maison >interface Web >tutoriel CSS >Comment utiliser les nouvelles unités vw, vh, vmin et vmax de CSS3
Comment utiliser les nouvelles unités vw, vh, vmin et vmax de CSS3
- php中世界最好的语言original
- 2018-01-30 10:25:352461parcourir
Cette fois, je vais vous montrer comment utiliser les nouvelles unités CSS3 vw, vh, vmin et vmax. Quelles sont les précautions pour utiliser les nouvelles unités CSS3 vw, vh, vmin et vmax. Voici quelques cas pratiques.
Cet article présente l'explication détaillée de l'utilisation des nouvelles unités CSS3 vw, vh, vmin et vmax, et la partage avec tout le monde. Les détails sont les suivants :
1. de vw, vh, vmin et vmax
(1) vw, vh, vmin, vmax sont des unités de fenêtre et des unités relatives. Ce n'est pas relatif au nœud parent ou au nœud racine de la page. Elle est déterminée par la taille de la fenêtre d'affichage. L'unité est 1, ce qui signifie quelque chose comme 1 %.
La fenêtre d'affichage est la zone dans laquelle votre navigateur affiche réellement le contenu, en d'autres termes, votre navigateur Web sans barres d'outils ni boutons.
(2) La description spécifique est la suivante :
vw : le pourcentage de la largeur de la fenêtre (1vw représente 1% de la largeur de la fenêtre)
vh : le pourcentage de la fenêtre hauteur
vmin : actuel La plus petite valeur de vw et vh
vmax : La plus grande valeur de vw et vh actuels
2, la différence entre vw, vh et % pourcentage
(1)% C'est le rapport défini par rapport à la taille de l'élément parent. vw et vh sont déterminés par la taille de la fenêtre.
(2) L'avantage de vw et vh est qu'ils peuvent obtenir directement la hauteur. Cependant, l'utilisation de % ne peut pas obtenir correctement la hauteur de la zone visuelle sans régler la hauteur du corps, c'est donc tout à fait vrai. bons.
3. Utilisations de vmin et vmax
Lors du développement de pages mobiles, si vous utilisez vw et wh pour définir la taille de la police (comme 5vw), la taille de la police affichée en modes portrait et paysage n'est pas pareil.
Puisque vmin et vmax sont les plus petits vw et vh actuels et les plus grands vw et vh actuels. Ici, vous pouvez utiliser vmin et vmax. Rendre la taille du texte cohérente sur les écrans horizontaux et verticaux.
4, Compatibilité navigateurs
(1) PC de bureau
Chrome : Parfaitement supporté depuis la version 26 (février 2013)
Firefox : Depuis Parfaitement supporté depuis la version 19 ( janvier 2013)
Safari : Parfaitement supporté depuis la version 6.1 (octobre 2013)
Opera : Parfaitement supporté depuis la version 15 (juillet 2013)
IE : Depuis IE10 (y compris Edge) il n'est encore que partiellement supporté (vmax n'est pas supporté, et vm remplace vmin)
(2) Appareils mobiles
Android : depuis la version 4.4 Support parfait (décembre 2013)
iOS : Support parfait depuis la version iOS8 (septembre 2014) )
2. Un exemple simple
1, code de page
En plus de définir la largeur et la hauteur des éléments, l'unité Viewport peut également être utilisée dans le texte. Ensuite, utilisez vw pour définir la taille de la police afin d'implémenter le texte réactif.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, h1, h2, h3 {
margin: 0;
padding: 0;
border: 0;
}
.demo {
width: 100vw;
font-size: 5vw;
margin: 0 auto;
background-color: #50688B;
color: #FFF;
}
.demo2 {
width: 80vw;
font-size: 5vw;
margin: 0 auto;
background-color: #ff6a00;
}
.demo3 {
width: 50vw;
height: 50vh;
font-size: 1vw;
margin: 0 auto;
background-color: #ff006e;
color: #FFF;
}
</style>
</head>
<body>
<div class="demo">
<h1>宽度100％, 字体5％</h1>
</div>
<div class="demo2">
<h2>宽度80％, 字体5％</h2>
</div>
<div class="demo3">
<h3>宽度50％, 高度50％, 字体1％</h3>
</div>
</body>
</html>3. Couche de masque pour obtenir une couverture complète
Parfois afin de mettre en évidence la boîte contextuelle ou d'empêcher les éléments de la page d'être cliqués. Nous avons besoin d'un masque translucide qui couvre toute la zone visible, ce qui peut être facilement réalisé en utilisant vw et vh.
1, exemple de code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
#mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: #000000;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<button onclick="document.getElementById('mask').style.display='inline'">点击显示遮罩</button>
<div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div>
</body>
</html>4. Implémentation d'une boîte pop-up centrée
1, la taille de la boîte pop-up s'adapte au contenu
(1) Exemple de rendu
Après avoir cliqué sur le bouton pop-up, une boîte pop-up centrée sur tout l'écran s'affichera.
La taille de la boîte pop-up est adaptative en fonction de la taille du contenu (image du logo), et il y a un calque de masque translucide derrière la boîte pop-up qui couvre tout l'écran.
Après avoir cliqué sur le bouton de fermeture, la boîte contextuelle sera masquée.
(2) Exemple de code
Le calque de masque utilise vw et vh pour obtenir une couverture plein écran. Le popover est ajouté au calque de masque et centré.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog-box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
}
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
<div id="dialogContainer" class="dialog-container">
<div class="dialog-box">
<div class="dialog-title">居中弹出框</div>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭</a>
<div class="dialog-body">
<img src="logo.png" class="demo-image" />
</div>
</div>
</div>
</body>
</html>2. La taille de la boîte pop-up change avec la taille de la fenêtre
(1) Exemple de rendu
Après avoir cliqué sur le bouton pop-up , une boîte contextuelle s'affichera centrée sur tout l'écran. La boîte contextuelle qui s'affiche.
La taille de la boîte pop-up n'est plus déterminée par la taille du contenu, mais change avec la taille de la fenêtre (la largeur et la hauteur représentent 80 % de la zone visible de l'écran ).
Après avoir cliqué sur le bouton de fermeture, la boîte contextuelle sera masquée.
(2) Exemple de code
Le calque de masque utilise vw et vh pour obtenir une couverture plein écran. La taille et la position de la boîte contextuelle sont également définies à l'aide de vw et vh.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微软雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-box {
top:10vh;
left:10vw;
width: 80vw;
height: 80vh;
text-align: left;
position: absolute;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
flex:1;
overflow: auto;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">点击显示弹出框</button>
<div id="dialogContainer" class="dialog-container">
<div class="dialog-box">
<div class="dialog-title">居中弹出框</div>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">关闭</a>
<div class="dialog-body">
<img src="logo.png" class="demo-image" />
</div>
</div>
</div>
</body>
</html>5. Limiter la taille maximale lors de l'affichage de grandes images
Nous pouvons également limiter la largeur ou la hauteur maximale de certains éléments via l'unité de visualisation pour éviter d'être trop grands et de dépasser l'écran. .
(1) Cliquez sur le bouton pour afficher une grande version de l'image originale au centre de l'écran.
(2) Si la largeur et la hauteur d'origine de l'image ne dépassent pas 90 % de la largeur et de la hauteur de l'écran, la taille par défaut de l'image sera affichée.
(3) Si la largeur et la hauteur d'origine de l'image dépassent 90 % de la largeur et de la hauteur de l'écran, elle sera limitée à 90 % de l'écran afin qu'elle puisse être entièrement affichée.
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment créer un effet d'animation de cercle en HTML5
Comment utiliser le WebGL de H5 dans le même L'interface crée des graphiques json et echarts
Comment utiliser les nouvelles fonctionnalités de balises sémantiques de H5
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!