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">
Démo
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</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:
Ils permettent de combiner plusieurs règles entre elles.
Il existe quatre opérateurs:
- and, le et
- not, le non, pour inverser une condition
- 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 pour l'impression du site
screen les écrans (PC, laptop, tablettes, smartphones, tv,...)
speech pour les outils permettant de communiquer avec la page par un système vocal
|
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 |
De la limite vers le haut: pour une limite à 500px, de 500px à l'infini par exemple. |
max-width |
De la limite vers le bas: pour une limite à 500px, de 500 à 0px par exemple.
| px
| height | Il s'agit de la hauteur de la fenêtre pour laquelle le style sera appliqué.
|
| min-height | Il s'agit de la hauteur minimale de la fenêtre pour laquelle le style sera appliqué.
|
| max-height | Il s'agit de la hauteur maximale de la fenêtre pour laquelle le style sera appliqué.
|
| orientation | Il 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.
Créer des intervalles
On va utiliser min-width et max-width.
Démo
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media screen and (min-width:300px) and (max-width:800px){
body{
background:red;
}
.cit {
color:white;
}
}
</style>
</head>
<body>
<p>On fait la guerre quand on veut, on la termine quand on peut. (Nicolas Machiavel)</p>
</body>
- On a utiliser and, donc les 2 conditions doivent être vraies pour que le style s'applique.
- Avec min-width: de la limite de 300px vers le haut, donc au dessus de 300px le fond rouge apparaît.
En dessous de 300px on a un fond blanc.
- Avec max-width: de la limite de 800px vers le bas, donc au dessous de 800px le fond rouge apparaît.
Au dessus de 800px on a un fond blanc.
- Donc, en dessous de 300px et audessus de 800px les 2 conditions ne sont pas vraies, pas de fond rouge.
Entre 300px et 800px les 2 conditions sont vraies et le fond rouge apparaît.
Autres exemples
Quelques exemples:
Quiz
Média 1
