Le Responsive, qu’est ce que c’est ?
Aujourd’hui, nous utilisons beaucoup plus nos smartphones que nos ordinateurs. Nous nous sommes donc rendu compte que l’affichage sur ces 2 types d’écrans ne pouvaient pas être le même.
Le principe du Responsive est donc de créer du contenu qui va s’adapter à la taille de l’écran de l’utilisateur (il est possible alors de le faire varier un peu).
La logique, depuis ces dernières années, est de créer les pages en « mobile first ». C’est à dire les développer pour un affichage sur smartphones. Puis d’adapter le contenu pour les ordinateurs.
De plus, il faut garder à l’esprit que dans 94% des cas on utilise son mobile en mode portrait !
Comment ça marche ?
Dans un premier temps, et ce depuis HTML5, pour que les règles « Responsive » (ou Media Query) soient prises en compte, il faut obligatoirement ajouter dans le <head> de la page la meta suivante :
<meta name=”viewport” content=”width=device-width, initial-scale=1”/>
Dans un deuxième temps, dans le fichier CSS, on écrit toutes nos règles pour un affichage sur mobile. Puis à la fin on vient rajouter les nouvelles règles qui seront uniquement valables pour les autres tailles d’écran.
@media (taille écran) [
selecteur {
propriété1: valeur;
...
}
...
}
On indiquera uniquement les propriétés qui sont modifiées par taille d’écran.
Les tailles d’écran (ou breakpoint) sont les suivantes :
Il est possible de cumuler les règles de « média query ». On a alors des créneaux de tailles d’écran. Et les règles ne s’appliqueront alors que pour ce créneau.
Par exemple :
@media (min-width:768px) and (max-width:960px) {
// règles à appliquer uniquement pour les écrans ayant un largeur entre 768 et 960px
}
A noter qu’il est préférable de mettre les règles « Responsive » à partir des breackpoint (min-width), comme ça elles s’appliqueront pour toutes les tailles à partir de celle définie.
Pour aller un peu plus loin
Ratio de taille d’écran
On peut aussi mettre des règles en fonction d’un ratio de pixels de la taille d’écran :
@media (-webkit-min-device-pixel-ratio: 2) {
// règles à appliquer
}
Par exemple pour les images, lorsque l’on augmente la taille de l’écran, la qualité de l’image peut devenir meilleure (haute def.)
Impression
Pour paramétrer précisément des impressions, on peut utiliser :
@media print {
// règles spécifiques pour l'impression
}
C’est dans le cas où l’utilisateur imprime la page (billetterie, facturation, devis, etc.). On peut indiquer des valeurs par défaut pour l’impression : noir & blanc pour diminuer l’utilisation des cartouches, imprimer uniquement ce qui est nécessaire, etc.