Introduction aux média queries

definition

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

grâce à cette technique on peut concevoir des sites web qui s'adapte au differents types d'écran et d'orientation

type de médias :

- all    : pour tout les média par défaut
- print  : pour le imprimante
- screen : pour tout les différents type d’écran
- speech : pour les outils de synthèse vocal

NB:

nous essentiellement on vas plus s’interesser au screen pour faire des pages responcive

c’est quoi l’utilité des médias queries ?

L’utilité des médias queries peut être illustré par des exemple suivant :

ex:

imaginer une application développer pour les mobiles (téléphones) le web étant accessible via un navigateur certain utilisateurs n’ayant pas de mobiles pourrons l'ouvrir sur ordinateur ou tablette ce qui cassera le style de l'application vis à vis du positionnement et dimensionnement

///## comment utilise-t-on les media queries ?

utilisation des medias queries

Pour utiliser le media querie en css on aura besoin de specifier certain breakpoint(taille d’écran ) generalement dans le monde de developement web et mobile on a quatres types de breakpoints qui sont :

- le desktop  (xl)
- le laptop   (large)
- la tablette (md)
- le mobile   (sm)

syntaxe pour les médias queries

@media média opérateur (condition){ ... règle css ...}

Nb : operateur est optionnel

pour spécifier un design pour un ecran de moins de 480 px :

@media screen ( max-width:480px){
    /* … regles css pour petit ecran … */
}

NB:

pour spécifier les break-point on utilise les valeurs limites c’est à dire le min-width et le max-width.

par ailleurs on pourra spécifier les opérateur logique comme :

• only : exculsion
• and : jointure (et logique)
• etc ...

///exemple plus demostratif
ex :

@media only screen (max-width:1080px){ /* ---nouveaux règles css --- */}

@media (max-width:1400px)  and ( min-width :450px){ /* ---nouveaux règles css --- */}

en conclusion les media queries sont tellement utile pour le site dont l’objectif visuel est la responsivité mais aussi cible une certaine catégorie d’écran et de médias pour fournir en même temps des services cible par rapport à chaque cas .

Références

Media queries - CSS : Feuilles de style en cascade | MDN
Requêtes média CSS
Media query et le "responsive"