Les media queries

    Publié le : 14-12-2019 17:32

    Introduction

    L'idée de cet article est d'offrir les possibilités de comprendre rapidement les méthodes à mettre en œuvre, pour permettre à une application web de s'ajuster automatiquement à la taille d’écran du terminal client. Ce qui est rendu possible grâce au media queries.

    Sommairement, les media queries se comportent comme des règles inclusives ou exclusives. Elles permettent de définir sur quel type de terminal les propriétés CSS vont s'éxécuter.

    Elles offrent entre autres possibilités, celle d'intégrer des opérateurs logiques permettant de définir des règles inclusives ou exclusives. Ainsi que des plages de valeurs minimales (quand à la taille du terminal) ou maximale.

    À noter qu'il n'est pas nécessaire d'utiliser de dépendance, le CSS3 permet de le faire nativement à l'aide de la balise @media.

    Les sélecteurs de typologie de terminaux :

    • all (tous les formats)
    • screen (tous écrans valeur par défaut si non précisé)
    • print (appliquer en cas d'impression)
    • braille (braille)
    • embossed (imprimante à braille)
    • projection (projecteur)
    • tv (téléviseur)
    • handheld (théoriquement périphériques mobiles ou de petite taille, mais dépendant pour beaucoup de l'interprétation du navigateur à éviter)
    • aural (synthèse vocal)
    • speech (synthèse vocal)

    Les opérateurs logiques :

    Les opérateurs logiques permettent de définir un ensemble de conditions à réunir pour choisir quel lot de règles CSS seras appliqué. On dénombre 3 opérateurs.

    • only (uniquement)
    • not (négation de la condition booleen)
    • and (clause associative)

    Les sélecteurs de propriétés (aussi appelée fonctionnalités)

    Il existe différents sélecteurs qui peuvent servir de concert avec les opérateurs logiques. Les plus utilisés sont width (dimension en largeur de la zone d'affichage) et height (dimension en hauteur de la zone d'affichage). Mais il est intéressant de savoir qu'il en existe d'autres.

    • width (dimension en largeur de la surface d'affichage)
    • height (dimension en hauteur de la surface d'affichage)
    • device-width (dimension en largeur de l'écran)
    • device-height (dimension en hauteur de l'écran)
    • device-aspect-ratio (ratio du périphérique de sortie 16:9, 4:3, etc)
    • orientation (orientation de l'écran portrait ou paysage)
    • resolution (la résolution en dpi,dpcm, dppx, de l'écran)

    Cette liste n'est pas exhaustive et ne couvre que les plus utiles (à mon sens).

    En application concrète à l'aide des media queries :

    Dans l'exemple de mise en pratique des media queries suivant seule les imprimantes afficherons leur titre h1 en rouge.

    @media print {
      h1 {
    	color:red;
      }
    }

    Dans celui ci après seul les pages affichées via des projecteurs verront leur titre h1 en vert.

    @media projection {
      h1 {
          color:green;
      }
    }

    L'exemple ci après désigne uniquement les écrans de largeur inférieure à 360 pixels.

    @media screen and (max-width: 360px) {
      .h1 {
        color:blue;
      }
    }
    

    Il est parfaitement possible de cumuler des opérateurs logiques comme le présente l'exemple suivant désignant les écrans compris entre 800 et 1024 pixels.

    @media screen and (min-width: 800px) and (max-width: 1024px) {
      .h1 {
        color:purple;
      }
    }
    

    Pour les développeurs travaillant avec bootstrap (v4.3)

    Dans bootstrap les media queries fonctionnent dans une logique de développement « mobile-first ».  Autrement dit, le développement du visuel doit d'abord répondre aux problématiques des téléphones portables, puis les règles des media queries doivent cibler les terminaux dont les écrans sont plus grands.

    Ecrans de taille inférieur 576 pixels et supérieur (téléphone en mode paysage).

    @media (min-width: 576px) { }

    Ecrans de taille inférieur 768 pixels et supérieur (tablette).

    @media (min-width: 768px) { }

    Ecrans de taille inférieur 992 pixels et supérieur (pc portable).

    @media (min-width: 992px) { }

    Ecrans de taille inférieur 1200 pixels et supérieur (pc de bureau à grand écran).

    @media (min-width: 1200px) { }

    Ces différents « points de ruptures » permettent de gagner en productivité sans se soucier des media queries pour les cas les plus génériques.