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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code)
Jun 28, 2022 pm 01:39 PM
Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !
Utilisez habilement CSS pour réaliser divers boutons de forme étrange (avec code)
Jul 19, 2022 am 11:28 AM
Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !
Comment masquer des éléments en CSS sans prendre de place
Jun 01, 2022 pm 07:15 PM
Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.
Comment implémenter des bordures en dentelle en CSS3
Sep 16, 2022 pm 07:11 PM
En CSS, vous pouvez utiliser l'attribut border-image pour réaliser une bordure en dentelle. L'attribut border-image peut utiliser des images pour créer des bordures, c'est-à-dire ajouter une image d'arrière-plan à la bordure. Il vous suffit de spécifier l'image d'arrière-plan comme style de dentelle ; largeur de la bordure de l'image vers l'intérieur. Indique si le début est répété ;".
Il s'avère que le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur !
Jun 10, 2022 pm 01:00 PM
Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.
Comment agrandir l'image en cliquant sur la souris en CSS3
Apr 25, 2022 pm 04:52 PM
Méthode d'implémentation : 1. Utilisez le sélecteur ":active" pour sélectionner l'état du clic de la souris sur l'image ; 2. Utilisez l'attribut de transformation et la fonction scale() pour obtenir l'effet d'agrandissement de l'image, la syntaxe "img:active {transform : échelle (grossissement de l'axe x, grossissement de l'axe y);}".
L'effet d'animation CSS3 a-t-il une déformation ?
Apr 28, 2022 pm 02:20 PM
L'effet d'animation en CSS3 a une déformation ; vous pouvez utiliser "animation : attribut d'animation @keyframes ..{..{transform : attribut de transformation}}" pour obtenir un effet d'animation de déformation. L'attribut d'animation est utilisé pour définir le style d'animation et le. L'attribut transform est utilisé pour définir le style de déformation.
css3 qu'est-ce que la mise en page adaptative
Jun 02, 2022 pm 12:05 PM
La mise en page adaptative, également connue sous le nom de « mise en page réactive », fait référence à une mise en page Web capable de reconnaître automatiquement la largeur de l'écran et d'effectuer les ajustements correspondants. Une telle page Web peut être compatible avec plusieurs terminaux différents au lieu de créer une version spécifique pour chaque terminal. . La mise en page adaptative est née pour résoudre le problème de la navigation Web mobile et peut offrir une bonne expérience utilisateur aux utilisateurs utilisant différents terminaux.
