Lors de la création d'une application avec Rails dans le programme d'une certaine école de programmation, j'étais dans une situation pour définir la taille des éléments d'affichage plein écran tels que les images d'arrière-plan en tenant compte du port d'affichage.
.hoge {
width: 100vw;
height: 100vh;
}
J'ai écrit, mais la réponse modèle est
.hoge {
width: 100%;
height: 100vh;
}
Bien qu'ils se ressemblent, je me demandais pourquoi cette différence était ... et j'ai cherché diversement.
** Utilisez 100vh pour placer les éléments à pleine hauteur de page 100% est souvent utilisé lors de la disposition de l'élément pour remplir la largeur de la page **
J'ai vu quelques explications sur le contenu. Je me demandais pourquoi je l'ai utilisé correctement, alors j'ai enquêté dessus.
Tout d'abord, passons en revue.
viewport Fait référence à la zone affichée par le navigateur. Dans le monde d'aujourd'hui, où les navigateurs sont visualisés non seulement à partir d'ordinateurs personnels, mais également à partir de smartphones et de tablettes, il est important de créer l'apparence de pages conscientes de la fenêtre d'affichage.
vw(viewport width) Unité qui spécifie la largeur en pourcentage de la largeur de la fenêtre. 1vw = 1% de la largeur affichée dans le navigateur
vh(viewport height) Unité qui spécifie la hauteur sous forme de pourcentage de la hauteur de la fenêtre. 1vh = 1% de la hauteur affichée dans le navigateur
À ce stade, je veux spécifier CSS pour les éléments d'affichage plein écran avec vw et vh, mais pourquoi dit-on que "la largeur de l'élément plein écran est% et la hauteur est généralement vh"? N'est-ce pas?
Maîtrisez comment spécifier la largeur et la hauteur CSS )
Ici, je voudrais faire attention à la différence entre 100% et 100vh. 100% est le rapport à l'élément parent. 100vh est le rapport au port d'affichage (taille de l'écran).
** À propos de la largeur **
Si la largeur n'est pas du tout spécifiée par px jusqu'au corps, la largeur du navigateur = la largeur du corps. En d'autres termes, la largeur du corps change en fonction du terminal de visualisation et de la taille de la fenêtre du navigateur.
D'après la citation ci-dessus, nous pouvons voir que la largeur est ** la largeur de l'élément body ** si aucun px n'est spécifié pour l'élément parent. En d'autres termes, une largeur de 100% pour l'élément body (élément parent) dans ce cas a la même signification que 100vw en fonction du navigateur. En conséquence, la largeur de 100% de l'élément d'arrière-plan plein écran est identique à 100vw, il semble donc que "width is%" convienne dans ce cas.
** À propos de la hauteur **
Sauf indication contraire dans CSS, la valeur de la hauteur de l'élément est auto et la hauteur est déterminée automatiquement. Contrairement à width: auto, qui s'étend essentiellement horizontalement, height: auto ne s'étend pas verticalement. Il sera aussi élevé que le contenu d'éléments tels que les personnages et les images. Plus il y a d'éléments enfants à l'intérieur, plus la hauteur sera grande.
À partir de la citation ci-dessus, nous pouvons voir que ** "hauteur de l'élément parent = hauteur du contenu" **. En d'autres termes, s'il n'y a pas de hauteur de référence, l'élément enfant ne peut pas être spécifié en%. En conséquence, pour des éléments tels que les arrière-plans plein écran, il semble que vh doit spécifier la hauteur comme référence de hauteur du navigateur.
D'après ce commentaire, dans ce cas
--Lors de la disposition de l'élément pour remplir la largeur de la page → 100% car il ressemble à 100vw
--Lors de l'organisation des éléments pour remplir la hauteur de la page → 100vh car la hauteur doit être basée sur le navigateur
C'était rafraîchissant que cela signifiait cela.
Je suis encore un débutant, donc pour fixer mes connaissances Je voudrais continuer à être conscient de la compréhension à partir du «mécanisme» original de la méthode, pas seulement de la «méthode» de ce genre de chose.
J'espère que cela vous aidera. Merci d'avoir lu jusqu'au bout.
2020/10/31 [CSS] Viewport (vw, vh) et pourcentage (%), une façon intelligente d'utiliser des unités adaptées à la réactivité Dans cet article, à propos de la spécification de largeur%
"Vw" détermine sa taille en fonction de la largeur de la fenêtre. La largeur de cette fenêtre est calculée par la taille, y compris la barre de défilement du navigateur. Si la page est longue et que la barre de défilement est visible, la largeur de la fenêtre sera plus large que la largeur de l'élément html. Par conséquent, si vous définissez un élément sur "100vw", l'élément sera plus grand que html et body.
Donc, pour éviter tout désalignement lorsqu'il y a une barre de défilement Il est expliqué que la largeur doit être spécifiée par%. J'étais plus convaincu ...!
[CSS] Viewport (vw, vh) et pourcentage (%), une façon intelligente d'utiliser des unités adaptées à la réactivité Les ingénieurs actifs expliquent la différence entre 100vh et 100%, qui spécifie la hauteur des éléments avec CSS [pour les débutants]
Maîtrisez comment spécifier la largeur et la hauteur CSS )
Recommended Posts