Bonjour à tous,
Je voudrais vous parler des unités CSS, vh et vw que peut-être vous ne connaissez pas et qui sont assez pratique. Ce sont des unités au même titre que px, em, rem, %. Dans une page web, parfois, il est pratique de vouloir que le texte soit d'une taille adapté en fonction de la taille de l'écran. Si vous avez une tablette, le titre de l'application va être en plus gros que le titre de la même application mais sur mobile. Et je pense que les unités VW et WH vont permettre de réaliser cela facilement.
D'abord il faut savoir que la première lettre V de ces unités signifie viewport (donc ce sont des unités relative à la taille du viewport que vous avez définie -ou non-), ensuite, w pour width et h pour height.
Donc :
-
vw : « Viewport Width », correspond à l’unité relative à la largeur de votre écran
-
vh : « Viewport Height », correspond à l’unité relative à la hauteur de votre écran
Prenons un exemple en supposant que vous avez un écran (enfin un viewport...) de 1000px de hauteur :
div {
font-size:20vh;
}
La taille du texte à l’intérieur de votre div sera donc de (1000 * 20/100) = 200px.
Et si vous passez à un écran de 800px de hauteur, vous aurez alors une taille de texte de 160px.
Je me permet de partager ça car je pense que certain ne connaisse pas car je le vois rarement utilisé.
Merci à tous
Liek