Informatique


Viewport et Media Queries

Aller à


Généralités

Le Viewport et les Media Queries permettent le Responsive Web Design.
Il s'agit d'adapter l'affichage d'un site Web en fonction des spécificités de l'écran (le plus souvent) qui va afficher le code html/css.

Une média query est une requête, la réponse à cette requête est toujours soit vraie soit fausse, aucune autre valeur.


Le vieuwport

Le viewport c'est une affaire pas toujours très claire..., voir le dossier d'alasacréation.

Dans 99% des cas la ligne suivante suffit pour régler d'éventuels problèmes d'affichage.

Syntaxe
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	

Il existe une commande CSS @viewport également, mais celle-ci est encore très mal supportée à ce jour (janvier 2021).


Démo
<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</style>
</head>
<body>
<p>On fait la guerre quand on veut, on la termine quand on peut. (Nicolas Machiavel)</p>
</body>

On constate:

  • content="width=device-width signifie que le viewport prend la largeur (width) de l'écran (device-width) sur lequel s'ouvre la page, l'espace d'affichage sera don égale à l'écran du client.
  • initial-scale=1.0 signifie que le zoom de base (initial-scale) prend la valeur 100% afin d'éviter l'effet de zoom
  • sans la meta viewport, lorsqu'on diminue la taille de l'écran, le texte diminue de taille et devient quasi illisible
  • cet effet de zoom peut être supprimé avec la meta viewport
  • avec la meta viewport l'effet zoom est supprimé lorsqu'on diminue la taille de l'écran, le texte reste de même taille et donc parfaitement visible


Les Media Queries

Les opérateurs:

Il existe quatre opérateurs:

  • and, le et
  • not, le non
  • only, seulement
  • , (la virgule), le ou

Chaque commande permettra de cibler un ou plusieurs médias et de préciser des valeurs pour ces médias.

Les médias:

On peut cibler tous les médias avec all ou au contraire en cibler un en particulier: print, screen et speech.

Médias
  • all tous les périphériques (valeur par défaut)
  • print les imprimantes
  • screen les écrans (PC, laptop, tablettes, smartphones, tv,...)
  • speech pour les outils de synthèse vocale

  • Les propriétés:

    Nous travillerons uniquement avec le média screen, on va donc le détailler.

    Valeurs Descriptions
    width Il s'agit de la largeur de la fenêtre pour laquelle le style sera appliqué.
    min-width On cible la largeur minimale de la fenêtre pour laquelle le style sera appliqué.
    max-width On cible la largeur maximale de la fenêtre pour laquelle le style sera appliqué.
    heightIl s'agit de la hauteur de la fenêtre pour laquelle le style sera appliqué.
    min-heightIl s'agit de la hauteur minimale de la fenêtre pour laquelle le style sera appliqué.
    max-heightIl s'agit de la hauteur maximale de la fenêtre pour laquelle le style sera appliqué.
    orientationIl s'agit de spécifier comment on veut afficher la page selon lorientation: portrait ou paysage.
    Valeurs possibles: "portrait" ou "landscape".
    device-width (PM)Il s'agit de la largeur de l'écran (et non la fenêtre!) dans lequel s'ouvre le document.
    On peut utiliser les préfixes "min-" et "max-"
    Exemple: media="screen and (device-width:500px)"
    device-height (PM)Il s'agit de la hauteur de l'écran (et non la fenêtre!) dans lequel s'ouvre le document.
    On peut utiliser les préfixes "min-" et "max-"
    Exemple: media="screen and (device-height:500px)"
    etc.Voir MDN.

    Lorsqu'on parle de la largeur ou de la hauteur d'une fenêtre d'affichage ou d'un écran, on parle en fait de la définition, c'est-à-dire du nombre de pixels disponible pour l'affichage.


    Exemples

    Quelques exemples:

    @media screen and (min-width:500px){} Visera les surfaces d'affichage qui sont au minimum large de 500px.
    @media screen and (max-width:700px){} Visera les surfaces d'affichage qui sont large de maximum de 700px.
    @media screen and (min-width:500px) and (max-width:700px){} Visera les surfaces d'affichage qui sont large de minimum 500px et large au maximum de 700px.
    @media screen and (orientation: portrait){} Visera tous les médias dont le surface d'affichage est en orientation "portrait".

    Quiz

    Média 1