J'ai mentionné de nouvelles (relativement) unités de mesure. Ces unités sont vw, vh, vmin et vmax et sont basées sur la taille de la fenêtre d'affichage du navigateur. Leur taille réelle change à mesure que la fenêtre d'affichage du navigateur change, ce qui rend ces unités idéales pour une conception réactive. Bien que dans mon article précédent, j'ai réfuté l'utilisation de ces unités pour spécifier la taille des polices, elles peuvent être très utiles pour travailler avec des éléments de mise en page.

Unités de fenêtre

Les unités de fenêtre sont des unités relatives, ce qui signifie qu'elles ne peuvent pas être mesurées objectivement. Leur taille est déterminée par la taille de la fenêtre du navigateur. Il existe quatre unités liées à la fenêtre.

Je me concentrerai sur les deux premiers car ce sont les plus couramment utilisés. Dans de nombreux cas, les unités de fenêtre (vh et vw) chevauchent les pourcentages en termes de capacités. Cependant, chacun d’eux possède ses propres forces et faiblesses.

Pour résumer, cela ressemble à ceci :

Lorsqu'il s'agit de largeur, % est meilleur, et lorsqu'il s'agit de hauteur, vh est meilleur.

Éléments pleine largeur de page : % > vw

Comme je l'ai déjà dit, vw détermine la taille de l'élément en fonction de la largeur de la fenêtre. Cependant, les navigateurs calculent la taille en fonction de l'espace réservé à la barre de défilement.

Si la largeur de la page dépasse la largeur de la fenêtre, une barre de défilement apparaît. Cependant, en réalité, la largeur de la fenêtre est supérieure à la largeur de l'élément HTML.

Fenêtre > HTML > corps

Ainsi, si vous définissez la largeur de l'élément sur 100vw, l'élément s'étendra au-delà du code HTML et du corps. Dans cet exemple, j'ai fait une bordure rouge autour de l'élément html et rempli les sections de différentes couleurs.

En raison de cette nuance, il est préférable de créer des éléments sur toute la largeur de la page en utilisant des pourcentages plutôt que de se fier à la largeur de la fenêtre.

Éléments de hauteur pleine page : vh > %

Lors de la création d'éléments qui doivent avoir la même hauteur que la page, il est préférable d'utiliser vh au lieu de pourcentages. Puisque la taille d'un élément, définie en pourcentage, est relative à son élément parent, on ne peut obtenir un élément d'une hauteur égale à la hauteur de l'écran que si son élément parent occupe également toute la hauteur de l'écran. Cela signifie que nous devons positionner l'élément comme fixe afin de faire de l'élément html le parent, ou recourir à un hack.

Utiliser vh pour obtenir cet effet est assez simple :

Exemple ( hauteur : 100vh; )

Quelle que soit la manière dont l'élément .example est imbriqué, ses dimensions peuvent être définies par rapport aux dimensions de la fenêtre. Le problème de défilement ne nous dérangera pas puisque la plupart des sites n'ont pas de barre de défilement horizontale

Voici quelques exemples d’utilisation des unités vh.

Images d’arrière-plan en plein écran

Une utilisation typique de l'unité vh consiste à créer une image d'arrière-plan qui s'étend sur toute la hauteur et la largeur de l'écran, quelle que soit la taille de l'appareil. C'est assez facile à faire.

Bg ( position : relative ; arrière-plan : url("bg.jpg") centre/couverture ; largeur : 100 % ; hauteur : 100vh ; )

De la même manière, nous pouvons créer un effet « pages » en donnant à chaque section les dimensions de la fenêtre.

Section (largeur : 100 % ; hauteur : 100vh ; )

Nous pouvons utiliser JavaScript pour créer l’illusion de tourner les pages.

$("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animer(( scrollTop: movePos ), 1000 ))

Image pliante

Vh peut également être utilisé pour contrôler la taille d'une image dans une page. Par exemple, dans le cadre d'un article. Nous voulons nous assurer que toute image sera affichée dans son intégralité, quelle que soit la taille de l'écran.

Nous aurons besoin du code suivant

Img ( width: auto; /* La largeur automatique doit être proportionnelle à la hauteur */ max-width: 100%; /* Pas plus que la largeur de l'élément parent */ max-height: 90vh; /* Pas plus que la hauteur de la fenêtre */ margin: 2rem auto )

Prise en charge du navigateur

Ces unités étant relativement récentes, des problèmes subsistent avec certains navigateurs.

Voici comment les résoudre.

Les unités CSS jouent un rôle important dans la création de sites Web et dans la définition de la taille de divers éléments. Les valeurs CSS peuvent être exprimées sous forme de nombres positifs ou négatifs, bien que certaines propriétés n'acceptent que les nombres positifs. La valeur numérique est accompagnée d'une abréviation à deux lettres qui représente l'unité de longueur réelle. Par exemple, cm (centimètres), px (pixels) ou em CSS. L'exception à cette règle est la valeur 0 (zéro), qui ne nécessite pas d'unité de mesure.

Les unités CSS sont de deux types : absolues et relatives.

Unités de longueur absolue en CSS

Les unités CSS absolues ne conviennent pas à la conception Web. Ils représentent des représentations numériques des résultats de mesure dans le monde physique et sont indépendants de la taille et de la résolution de l'écran. Les longueurs absolues ayant la même valeur peuvent différer sur différents écrans. Cela est dû aux différences de DPI (points par pouce) de l'écran.

Les écrans haute résolution ont un DPI plus élevé que les écrans basse résolution, ce qui rend les images et le texte plus petits. Les unités absolues sont utilisées pour définir les styles d'impression, où les mesures sont en pouces, points et pica.

Unités absolues de longueur :

• cm (centimètres);
• mm (millimètres);
• en (pouces);
• pc(pics);
• pt(points);
• px (pixels).

La plupart des unités absolues de longueur sont inutiles sur Internet. La seule exception est px. Les pixels sont des unités relatives par rapport à la résolution des écrans. Pour les imprimantes et les moniteurs à très haute résolution, un pixel en CSS équivaut à plusieurs pixels sur l'écran, le nombre de px par pouce est donc d'environ 96. Le pixel est la plus petite unité de mesure et est couramment utilisé comme guide pour les autres.

Unités de longueur relative en CSS

Les unités de longueur relative en CSS n'ont pas de valeurs fixes. Leurs valeurs dépendent d'autres valeurs ou fonctions spécifiées. Ils sont plus populaires dans la conception de sites Web car ils permettent de déterminer plus facilement la taille d’un élément. Avec leur aide, vous pouvez définir la largeur, la hauteur, la taille de la police, etc. par rapport à d'autres paramètres de base.

Unités relatives selon la police

Les unités relatives spécifiques à la police font référence à une taille de police prédéfinie ou à la valeur de la propriété font-family :

• ex(hauteur du caractère x);
• ch( largeur de caractère zéro (0));
• unité em en CSS (hauteur de police de l'élément actuel);
• rem ( taille de la police de l'élément racine).

ex

Défini comme « hauteur du caractère x de la police actuelle OU la moitié 1 em" C'est-à-dire la hauteur de la lettre minuscule x de la police installée. Lorsque vous modifiez la valeur de la propriété font-family, l'unité ex change.

ch

Égal à la largeur du caractère 0 . Cette unité de mesure change également lorsque la valeur de la propriété font-family change.

em

L'unité CSS em a une valeur égale à la taille de la police du corps ou de l'élément parent. Par exemple, si la taille de police d'un élément parent est de 30 px, alors une valeur de 1em sera calculée comme 30 px (30 x 1) pour tous les éléments enfants. Il n'est pas nécessaire que le nombre soit un nombre entier. Si dans l'exemple nous remplaçons 1em par 0,5, alors la valeur sera de 15px (30 x 0,5).

L'unité em prend la valeur de la balise parent. Cela peut conduire à des résultats indésirables lors de l'utilisation d'éléments imbriqués.

Disons que nous avons trois éléments imbriqués. Le premier élément (racine) a une taille de police de 30 px et les deux éléments imbriqués ont une taille de police de 2 em. L'élément imbriqué dans la racine aura une taille de police calculée comme 60px (30 x 2 ). Et l'élément imbriqué à l'intérieur aura une taille de police calculée comme 120px (60 x 2).

rem

rem est similaire à CSS em , mais sa valeur reste toujours égale à la taille de la police de l'élément racine. L'unité rem est utile lors du développement de sites Web réactifs car elle vous permet de redimensionner la page entière en modifiant la taille de la police dans l'élément HTML.

Unités de longueur en pourcentage basées sur la taille de la fenêtre d'affichage

La zone de visualisation est basée sur la largeur et la hauteur de la fenêtre et comprend :

• vh( hauteur de la fenêtre);
• vw( largeur de la fenêtre);
• vmin( le plus petit de (vw, vh));
• vmax ( le plus grand de (vw, vh)).

VW

Il s'agit de la largeur de la fenêtre. 1vw est égal à 1/100 de la largeur de la fenêtre. Un peu comme les pourcentages, sauf que la valeur reste la même pour tous les éléments quelle que soit la largeur de leurs éléments parents. Par exemple, si la largeur de la fenêtre est de 1 000 px, alors 1vw sera égal à 10 px.

vh

Identique à VW ( largeur de la fenêtre), seule cette unité de mesure dépend de la hauteur de la zone de visualisation. 1vh est égal à 1/100 de la hauteur de vue. Par exemple, si la hauteur de la fenêtre du navigateur est de 900 px, alors 1vh serait de 9 px.

vmin

Vmin est égal à 1/100 de la valeur minimale entre la hauteur et la largeur de la fenêtre. En d’autres termes, 1/100ème du côté le plus court. Par exemple, si les dimensions de la fenêtre 1200 par 800 pixels, alors la valeur vmin sera 8px .

vmax

vmax est égal à 1/100 de la valeur maximale entre la hauteur et la largeur de la fenêtre. En d’autres termes, 1/100 du côté le plus long. Par exemple, si les dimensions étaient 1200 par 800 pixels, alors vmax est 12px .

Intérêt %

La distance spécifiée en pourcentage dépend de la longueur de l'élément parent. Par exemple, si un élément parent a une largeur de 1 000 px et que son enfant représente 50 % de cette valeur, la largeur de l'élément enfant sera de 500 px.

SUPPORT DU NAVIGATEUR

em CSS, ex, px, cm, mm, in, pt et pc

sont pris en charge dans tous les navigateurs, y compris les anciennes versions d'IE.

De l'auteur : Plusieurs années se sont écoulées depuis la première apparition des unités de fenêtre en CSS. Ce sont des unités de longueur véritablement adaptatives ; leur valeur change pour s'adapter à la taille de la fenêtre du navigateur. Si vous en avez entendu parler mais n’avez jamais approfondi les détails, cet article est fait pour vous.

Unités de mesure et leur signification

Il existe 4 types d'unités de fenêtre en CSS : vh, vw, vmin et vmax.

Hauteur de la fenêtre (vh) – basée sur la hauteur de la fenêtre. La valeur 1vh est égale à 1% de la hauteur de la fenêtre.

Largeur de la fenêtre (vw) – basée sur la largeur de la fenêtre. La valeur 1vw est égale à 1% de la largeur de la fenêtre.

Minimum de la fenêtre d'affichage (vmin) – basé sur le côté minimum de la fenêtre d'affichage. Si la hauteur de la fenêtre est inférieure à la largeur, la valeur de 1vmin sera égale à 1% de la hauteur. De même, si la largeur est inférieure à la hauteur, alors 1vmin sera égal à 1% de la largeur de la fenêtre.

Maximum de la fenêtre (vmax) – basé sur le grand côté de la fenêtre. Si la hauteur de la fenêtre est supérieure à la largeur, alors la valeur de 1vmax sera égale à 1 % de la hauteur de la fenêtre. Si la largeur de la fenêtre est supérieure à la hauteur, alors 1vmax sera égal à 1% de la largeur.

Voyons quelles valeurs nous obtenons dans différentes situations :

Si la fenêtre d'affichage a une largeur de 1 200 px et une hauteur de 1 000 px, alors la valeur de 10vw sera de 120 px et celle de 10vh sera de 100 px. La largeur de la fenêtre d'affichage est supérieure à la hauteur, donc 10vmax sera égal à 120px et 10vmin sera 100px.

Si vous faites pivoter l'appareil pour que la largeur devienne 1 000 px et la hauteur 1 200 px, alors 10vh devient 120 px et 10vw devient 100 px. Fait intéressant, 10vmax restera 120px, car désormais la valeur est déterminée par la hauteur de la fenêtre. La valeur de 10vmin restera également 100px.

Si vous réduisez la fenêtre du navigateur à 1 000 px de large et 800 px de haut, alors 10vh serait de 80 px et 10vw serait de 100 px. De même, 10vmax deviendra 100px et 10vmin deviendra 80px.

À ce stade de votre fenêtre d'affichage, les unités ne diffèrent peut-être pas beaucoup des pourcentages, mais la différence est importante. Dans le cas des pourcentages, la largeur et la hauteur des éléments enfants dépendent du bloc parent. Exemple:

Dans la démo, vous pouvez voir comment la largeur du premier élément enfant occupe 80 % de la largeur du parent. Le deuxième enfant a une largeur de 80 vw, ce qui le rend plus large que son parent.

Application d'unités de fenêtre

Ces unités sont basées sur les dimensions de la fenêtre, elles sont donc très utiles dans les situations où la largeur, la hauteur ou les dimensions des éléments doivent changer en fonction des dimensions de la fenêtre.

Images d'arrière-plan et sections en plein écran

Sur Internet, on trouve souvent des images d’arrière-plan sur des éléments qui occupent tout l’écran. La même chose peut être faite dans la conception d’un site Web, de sorte qu’une section distincte concernant un produit ou un service occupe tout l’écran. Dans de tels cas, vous pouvez définir la largeur des éléments à 100 % et la hauteur à 100vh.

Regardons l'exemple HTML suivant :

un

< div class = "fullscreen a" > < p >un< p > < / div >

Le CSS ci-dessous étendra la section de l'image d'arrière-plan sur toute la largeur :

Plein écran ( largeur : 100 % ; hauteur : 100vh ; remplissage : 40vh; ) .a ( arrière-plan : url("path/to/image.jpg") center/cover; )

Plein écran ( largeur : 100 % ; hauteur : 100vh ; rembourrage : 40vh ; background : url ( "chemin/vers/image.jpg" ) centre / couverture ;

Rubriques idéales

Vous avez peut-être entendu parler ou même utilisé le plugin jQuery Ajuster le texte. À l'aide de ce plugin, vous pouvez redimensionner les en-têtes afin qu'ils occupent toute la largeur de l'élément parent. Comme je l'ai dit plus tôt, la valeur des unités de fenêtre dépend directement de la taille de la fenêtre. Autrement dit, si vous spécifiez la taille de police des titres dans les unités de fenêtre, ils s'adapteront idéalement à chaque écran. Si la largeur de la fenêtre change, le navigateur modifiera automatiquement le titre. Il vous suffit de déterminer la valeur initiale correcte pour la taille de la police.

Le principal problème avec la taille de police et les unités de fenêtre est que la taille du texte varie considérablement en fonction de la fenêtre. Par exemple, une taille de police de 8vw rendra l'en-tête 96px pour une largeur de fenêtre de 1200px, 33px pour une largeur de fenêtre de 400px et 154px pour une largeur de fenêtre de 1920px. La police peut être trop grande ou trop petite pour une lecture facile. Vous pouvez en savoir plus sur la définition correcte de la taille du texte à l'aide des unités de mesure et de la fonction calc() dans un merveilleux article sur typographie dans les unités de fenêtre.

Centrage facile des éléments

Les unités de fenêtre peuvent être très utiles lorsque vous devez placer un élément exactement au centre de l'écran de l'utilisateur. Si la hauteur de l'élément est connue, il vous suffit alors de définir les valeurs des propriétés de marge supérieure et inférieure sur [(100 - hauteur)/2]vh.

Centré ( largeur : 60vw ; hauteur : 70vh ; marge : 15vh auto ;

Ce qu'il faut retenir

Si vous décidez d'utiliser une fenêtre d'affichage d'unité dans vos projets, vous devez garder quelques points à l'esprit.

CSS utilise des unités absolues et relatives pour dimensionner divers éléments. Les unités absolues sont indépendantes du périphérique de sortie, mais les unités relatives définissent la taille d'un élément par rapport à la valeur d'une autre taille.

Unités relatives

Les unités relatives sont généralement utilisées pour travailler avec du texte. Dans le tableau 1 répertorie les principales unités relatives.

L'unité em est une valeur mutable qui dépend de la taille de la police de l'élément actuel (la taille est définie via la propriété de style font-size). Chaque navigateur possède une taille de texte intégrée qui est utilisée lorsque cette taille n'est pas explicitement spécifiée. Par conséquent, initialement 1em est égal à la taille de police par défaut du navigateur ou à la taille de police de l'élément parent. La notation en pourcentage est identique à em , dans la mesure où les valeurs de 1em et 100 % sont égales.

L'unité ex est définie comme la hauteur du caractère « x » minuscule. ex est soumis aux mêmes règles que em , à savoir qu'il est lié à la taille de police par défaut du navigateur ou à la taille de police de son élément parent.

L'unité ch est égale à la largeur du caractère "0" de l'élément courant et, comme em, dépend de la taille de la police.

La différence entre em et rem est la suivante. em dépend de la taille de police du parent de l'élément et change avec lui, et rem est lié à l'élément racine, c'est-à-dire la taille de police spécifiée pour l'élément html.

Il existe également un groupe d'unités relatives liées à la taille de la fenêtre du navigateur. Dans le tableau 2 en montre une liste avec une description.

Unités absolues

Les unités absolues représentent les dimensions physiques : pouces, centimètres, millimètres, points, picas et pixels. Pour les appareils à faible dpi (le nombre de pixels par pouce détermine la densité de pixels), la liaison se fait par pixel. Dans ce cas, un pouce équivaut à 96 pixels. Évidemment, le pouce réel ne correspondra pas à celui d’un tel appareil. Sur les appareils à DPI élevé, le pouce réel est le même que le pouce à l'écran, la taille des pixels est donc calculée à 1/96 de pouce. Dans le tableau 3 répertorie les unités absolues de base.

Exemple

en-tête 30px

Taille du texte 1,5 em

Titre en 24 points

Décaler le texte vers la droite de 30 millimètres

Note

Lors de la définition des dimensions, veillez à spécifier les unités de mesure, par exemple largeur : 30 px. Sinon, le navigateur ne pourra pas afficher le résultat souhaité car il ne comprend pas la taille dont vous avez besoin. Les unités ne sont pas ajoutées uniquement lorsque la valeur est nulle (marge : 0).

Internet Explorer prend en charge l'unité vm au lieu de vmin .

Spécification

Chaque spécification passe par plusieurs étapes d'approbation.

• Recommandation - La spécification a été approuvée par le W3C et est recommandée comme norme.
• Recommandation du candidat ( Recommandation possible) - le groupe responsable de la norme est convaincu qu'elle atteint ses objectifs, mais a besoin de l'aide de la communauté de développement pour mettre en œuvre la norme.
• Recommandation proposée Recommandation suggérée) - à ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
• Brouillon de travail - Une version plus aboutie d'un brouillon qui a été discuté et modifié pour examen par la communauté.
• Brouillon de l'éditeur ( Projet éditorial) - une version préliminaire de la norme après modifications apportées par les éditeurs du projet.
• Brouillon ( Projet de spécification) - la première version préliminaire de la norme.

×

De nouvelles unités relatives ont été ajoutées à CSS3 telles que vh , vw , vmin , vmax . Ces unités sont calculées par rapport à la taille de la fenêtre du navigateur. Pour les ordinateurs de bureau, la largeur de la fenêtre du navigateur est plus grande que la largeur de la fenêtre (la largeur de la barre de défilement est ajoutée), donc si vous définissez la largeur de l'élément sur 100vw , il s'étendra au-delà du code HTML.

Riz. 1. Image d'arrière-plan plein écran avec une largeur de 100 vw

Prise en charge du navigateur

IE : 9.0 sauf vmax, utilisez vm au lieu de vmin
Bord: 12.0 sauf vmax, utilisez vm au lieu de vmin
Firefox : 19.0
Chrome: 26.0
Opéra: 15.0
Safari: 6.1
iOS-Safari : 8.0
Androïde: 4.4
Chrome pour Android : 55.0

1. Unités vh et vw

Les techniques de conception de sites Web réactifs sont basées sur l'utilisation de pourcentages. Mais les pourcentages ne constituent pas la meilleure solution dans tous les cas, car ils sont calculés par rapport à la taille de l'élément parent le plus proche. Par conséquent, si vous souhaitez utiliser la hauteur et la largeur de la fenêtre du navigateur, il est préférable d'utiliser les unités vh et vw. Par exemple, si la hauteur de la fenêtre du navigateur est de 900 px, alors 1vh sera de 9 px. De même, si la largeur de la fenêtre du navigateur est de 1 600 px, alors 1vw sera de 16 px.

1.1. Image d’arrière-plan plein écran adaptative

Étant donné que la largeur de l'élément spécifié avec 100vw est supérieure à la largeur de la fenêtre, pour créer des images d'arrière-plan en plein écran, il est préférable d'utiliser une largeur de 100 %, qui sera égale à la largeur de l'élément html racine.

Plein écran-bg (arrière-plan : url(image.jpg); position de l'arrière-plan : centre ; taille de l'arrière-plan : couverture ; largeur : 100 % ; hauteur : 100vh ; ) Riz. 2. Image d'arrière-plan plein écran réactive

1.2. Effet de diapositive pleine page

Pour bloquer toute la hauteur de la fenêtre du navigateur, vous devez définir la hauteur : 100 % ; pour trois éléments - html, body et directement pour le bloc lui-même :

Html, corps ( hauteur : 100 % ; ) section ( hauteur : 100 % ; )

Étant donné que les pourcentages sont calculés par rapport aux valeurs des éléments parents, vous devez définir les valeurs appropriées pour chaque élément DOM. L'unité de mesure vh ne nécessite pas de chaînage de valeurs, puisque sa valeur est calculée directement par rapport à la fenêtre du navigateur :

Coupe ( hauteur : 100vh ; )

L'effet de feuilleter les diapositives lorsque vous cliquez sur la flèche est implémenté à l'aide d'un petit script jQuery :

JQuery(document).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window .scrollTop() + $(window).height(); ) if ($(this).hasClass("top")) ( var movePos = $(window).scrollTop() - $(window).height( ); ) $("html, corps").animate(( scrollTop: movePos), 600 ));

La hauteur spécifiée avec vh peut également être utilisée pour centrer un élément sur la page.