Categories
Apprentissage CSS Formation HTML Web

Un peu de « Responsive »

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.

To be Responsive, or not to be ?

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 :

Media Queries (tailles d’écrans)

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.

Spread the love

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.