Breadcrumb
Last updated on Thursday, June 9, 2016
  • 20 hours
  • Easy

Free online content available in this course.

Videos available in this course

Paperback available in this course

eBook available in this course.

Certificate of achievement available at the end this course

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Le responsive design avec les Media Queries

Log in or subscribe to enjoy all this course has to offer!

Savez-vous quelle est la première préoccupation des webmasters qui mettent en place le design de leur site ? La résolution d'écran de leurs visiteurs. Eh oui : selon les écrans, il y a plus ou moins de place, plus ou moins de pixels de largeur.

Cette information est importante lorsque vous construisez un design : comment votre site doit-il s'afficher en fonction des différentes résolutions d'écran ? Si vous avez un écran large, vous risquez d'oublier que certaines personnes naviguent avec des écrans plus petits. Et je ne vous parle même pas des navigateurs des smartphones, qui sont encore moins larges.

C'est là que les media queries entrent en jeu. Ce sont des règles à appliquer pour changer le design d'un site en fonction des caractéristiques de l'écran ! Grâce à cette technique, nous pourrons créer un design qui s'adapte automatiquement à l'écran de chaque visiteur !

Mise en place des media queries

Les media queries font partie des nouveautés de CSS3. Il ne s'agit pas de nouvelles propriétés mais de règles que l'on peut appliquer dans certaines conditions. Concrètement, vous allez pouvoir dire « Si la résolution de l'écran du visiteur est inférieure à tant, alors applique les propriétés CSS suivantes ». Cela vous permet de changer l'apparence du site dans certaines conditions : vous pourrez augmenter la taille du texte, changer la couleur de fond, positionner différemment votre menu dans certaines résolutions, etc.
Contrairement à ce qu'on pourrait penser, les media queries ne concernent pas que les résolutions d'écran. Vous pouvez changer l'apparence de votre site en fonction d'autres critères comme le type d'écran (smartphone, télévision, projecteur…), le nombre de couleurs, l'orientation de l'écran (portrait ou paysage), etc. Les possibilités sont très nombreuses !

Appliquer une media query

Les media queries sont donc des règles qui indiquent quand on doit appliquer des propriétés CSS. Il y a deux façons de les utiliser :

  • en chargeant une feuille de style .css différente en fonction de la règle (ex : « Si la résolution est inférieure à 1280px de large, charge le fichier petite_resolution.css ») ;

  • en écrivant la règle directement dans le fichier .css habituel (ex : « Si la résolution est inférieure à 1280px de large, charge les propriétés CSS ci-dessous »).

Chargement d'une feuille de style différente

Vous vous souvenez de la balise <link /> qui permet, dans notre code HTML, de charger un fichier .css ?

<link rel="stylesheet" href="style.css" />

On peut lui ajouter un attribut media, dans lequel on va écrire la règle qui doit s'appliquer pour que le fichier soit chargé. On dit qu'on fait une « requête de media » (media query en anglais). Voici un exemple :

<link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />

Au final, votre code HTML pourrait proposer plusieurs fichiers CSS : un par défaut (qui est chargé dans tous les cas) et un ou deux autres qui seront chargés en supplément uniquement si la règle correspondante s'applique.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde -->
        <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- Pour ceux qui ont une résolution inférieure à 1280px -->
        <title>Media queries</title>
    </head>
Chargement des règles directement dans la feuille de style

Une autre technique, que je préfère personnellement pour des raisons pratiques, consiste à écrire ces règles dans le même fichier CSS que d'habitude.
Dans ce cas, on écrit la règle dans le fichier .css comme ceci :

@media screen and (max-width: 1280px)
{
    /* Rédigez vos propriétés CSS ici */
}

Les règles disponibles

Il existe de nombreuses règles permettant de construire des media queries. Je vous présente ici les principales :

  • color : gestion de la couleur (en bits/pixel).

  • height : hauteur de la zone d'affichage (fenêtre).

  • width : largeur de la zone d'affichage (fenêtre).

  • device-height : hauteur du périphérique.

  • device-width : largeur du périphérique.

  • orientation : orientation du périphérique (portrait ou paysage).

  • media : type d'écran de sortie. Quelques-unes des valeurs possibles :

    • screen : écran « classique » ;

    • handheld : périphérique mobile ;

    • print : impression ;

    • tv : télévision ;

    • projection : projecteur ;

    • all : tous les types d'écran.

Les règles peuvent être combinées à l'aide des mots suivants :

  • only : « uniquement » ;

  • and : « et » ;

  • not : « non ».

Voici quelques exemples de media queries pour vous aider à bien comprendre le principe.

/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px)

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px)

/* Sur les téléviseurs */
@media tv

/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)

Tester les media queries

Les media queries sont surtout utilisées pour adapter le design du site aux différentes largeurs d'écran.

Faisons un test tout simple : nous allons changer la couleur et la taille du texte si la fenêtre fait plus ou moins de 1024 pixels de large. Pour ce test, je vais utiliser la seconde méthode qui consiste à écrire la règle directement dans le même fichier .css que d'habitude :

/* Paragraphes en bleu par défaut */
p
{
    color: blue;
}

/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 1024px)
{
    p
    {
        color: red; 
        background-color: black;
        font-size: 1.2em;
    }
}

Dans notre feuille CSS, nous avons d'abord demandé à ce que le texte des paragraphes soit écrit en bleu, jusque là rien de nouveau. En revanche, nous avons ajouté une media query qui s'applique à tous les écrans dont la largeur ne dépasse pas 1024px. À l'intérieur, nous avons appliqué des règles CSS sur les paragraphes pour les écrire plus gros et en rouge.

Résultat : la page n'a pas la même apparence selon la taille de la fenêtre (figure suivante) ! Essayez de la redimensionner pour voir !

Tester ce code

L'apparence du texte change en fonction de la taille de la fenêtre
L'apparence du texte change en fonction de la taille de la fenêtre

Mise en pratique des media queries sur le design

Bon, changer la couleur du texte, c'est bien joli mais cela n'apporte pas grand-chose. Par contre, cela devient de suite plus intéressant quand on se sert des media queries pour modifier l'apparence de son site en fonction de la résolution. Vous allez voir qu'on peut faire tout ce qu'on veut !

Pour cet exemple, je vous propose de reprendre le design que nous avons créé pour le site web de Zozor (figure suivante).

Le site web réalisé lors du TP
Le site web réalisé lors du TP

Le site est bien adapté à la plupart des résolutions d'écran mais, quand l'écran est plus petit que 1024 px, il devient nécessaire de « scroller » vers la droite pour voir toute la page. Le site n'est donc pas très pratique à consulter sur un petit écran.

Je vous propose d'utiliser les media queries pour changer l'apparence du site sur les résolutions inférieures à 1024 px de largeur. Nous allons opérer les modifications suivantes :

  • le menu de navigation en haut à droite sera disposé en hauteur plutôt qu'en largeur, et les liens seront écrits en plus petit ;

  • la bannière avec le pont de San Francisco (le Golden Gate) sera supprimée, car elle prend beaucoup de place et n'apporte pas beaucoup d'informations ;

  • le bloc <aside> « À propos de l'auteur » sera placé sous l'article (et non pas à côté), et son contenu sera réorganisé (la photo de Zozor sera positionnée en flottant).

On pourrait bien entendu faire beaucoup d'autres modifications : changer la couleur, la disposition du pied de page, etc. Mais cela sera déjà bien suffisant pour nous entraîner avec les media queries.

Nous allons travailler directement à l'intérieur du fichier style.css que nous avons réalisé lors du TP. Nous y ajouterons quelques instructions media queries pour adapter le design. Je vous invite à télécharger les fichiers du TP si vous ne les avez pas déjà.

Télécharger le TP

La page

Pour le moment, la largeur de la page est fixée à 900 px et le contenu est centré :

#bloc_page
{
    width: 900px;
    margin: auto;
}

À la suite de ces lignes, je vous propose d'ajouter la règle media query suivante :

@media all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }
}

La règle signifie : « Pour tous les types d'écrans, si la largeur de la fenêtre ne dépasse pas 1024 px, alors exécuter les règles CSS suivantes ».

Les règles CSS en question sont très simples, il n'y en a en fait qu'une seule : on donne une largeur automatique à la page (plutôt qu'une largeur fixe de 900 px). La page prendra alors tout l'espace disponible dans la fenêtre. Cela évite l'apparition de barres de défilement horizontales sur les petites résolutions.

Le menu de navigation

Nous voulons que le menu de navigation prenne moins de place sur les petites résolutions. Plutôt que de lui donner une dimension fixe, nous allons lui redonner sa dimension automatique flexible d'origine. Chaque élément du menu s'écrira en dessous du précédent : pour cela, nous demandons à ce que les éléments de la Flexbox soit organisés en colonne.

Enfin, le texte sera écrit plus petit et nous retirons la bordure en bas des liens lors du survol, car elle est moins adaptée à cette disposition.

@media all and (max-width: 1024px)
{
    nav
    {
        width: auto;
        text-align: left;
    }
    
    nav ul
    {
        flex-direction: column;
    }

    nav li
    {
        padding-left: 4px;
    }
    
    nav a
    {
        font-size: 1.1em;
    }
    
    nav a:hover
    {
        border-bottom: 0;
    }
}

La bannière

Pour retirer la bannière, rien de plus simple : nous utilisons la propriété display à laquelle nous affectons la valeur none. Si la fenêtre est trop petite, nous préférons masquer complètement la bannière :

@media all and (max-width: 1024px)
{
    #banniere_image
    {
        display: none;
    }
}

Le bloc « À propos de l'auteur »

Plutôt que de placer ce bloc à droite de l'article, nous allons le faire passer en-dessous grâce à des Flexbox en colonne. Ce type de disposition « de haut en bas » est plus adapté aux petits écrans.

À l'intérieur du bloc, nous réajustons un peu la position des éléments : la photo de Zozor, notamment, sera placée en flottant à droite.

@media all and (max-width: 1024px)
{
    section
    {
        flex-direction: column;
    }

    article, aside
    {
        width: auto;
        margin-bottom: 15px;
    }
    
    #fleche_bulle
    {
        display: none;
    }
    
    #photo_zozor img
    {
        width: 110px;
        float: right;
        margin-left: 15px;
    }
    
    aside p:last-child
    {
        text-align: center;
    }
}

Que signifie aside p:last-child ?

C'est un sélecteur avancé que nous n'avons pas utilisé jusqu'ici. aside p signifie « Tous les paragraphes à l'intérieur de la balise <aside> ». Avec :last-child, on cible uniquement le dernier paragraphe dans le bloc aside (celui qui contient les liens vers Facebook et Twitter), pour pouvoir centrer les images. Bien entendu, on aurait aussi pu affecter une class ou un id à ce paragraphe pour le cibler directement, mais je n'ai pas voulu modifier le code HTML.

Le résultat

La page est désormais complètement réorganisée lorsque la fenêtre fait 1024 px ou moins de largeur. Regardez par vous-mêmes le résultat, la figure suivante parle d'elle-même !

Le même site, présenté différemment en fonction de la largeur de l'écran

Le même site, présenté différemment en fonction de la largeur de l'écran

Essayez ce code !

Media queries et navigateurs mobiles

Comme vous le savez sûrement, les écrans des smartphones sont beaucoup moins larges que nos écrans habituels (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent le site en « dézoomant », ce qui permet d'avoir un aperçu de l'ensemble de la page. La zone d'affichage simulée est appelée le viewport : c'est la largeur de la fenêtre du navigateur sur le mobile.

En CSS, avec les media queries, si vous ciblez l'écran avec max-width sur un mobile, celui-ci va comparer la largeur que vous indiquez avec celle de son viewport. Le problème, c'est que le viewport change selon le navigateur mobile utilisé !

Navigateur

Largeur du viewport par défaut

Opera Mobile

850 pixels

iPhone Safari

980 pixels

Android

800 pixels

Windows Phone

1024 pixels

Un iPhone se comporte comme si la fenêtre faisait 980 px de large, tandis qu'un Android se comporte comme si la fenêtre faisait 800 px !

Pour cibler les smartphones, plutôt que d'utiliser max-width, il peut être intéressant de recourir à max-device-width : c'est la largeur du périphérique. Les périphériques mobiles ne dépassant pas 480 px de large, on pourra viser uniquement les navigateurs mobiles avec cette media query :

@media all and (max-device-width: 480px)
{
    /* Vos règles CSS pour les mobiles ici */
}

Pourquoi ne pas cibler les mobiles avec la règle media handheld ?

Je vois que vous suivez, très bien ! En effet, on peut (en théorie) cibler les écrans mobiles avec le media handheld… Malheureusement, aucun navigateur mobile à part Opera mobile ne reconnaît handheld. Ils se comportent tous comme s'ils étaient des écrans normaux (screen). On ne peut donc pas vraiment utiliser handheld pour viser les mobiles.

Vous pouvez modifier la largeur viewport du navigateur mobile avec une balise meta à insérer dans l'en-tête (<head>) du document :

<meta name="viewport" content="width=320" />

Vous pouvez utiliser cette balise pour modifier la façon dont le contenu de votre page s'organise sur les mobiles. Pour obtenir un rendu facile à lire, sans zoom, vous pouvez demander à ce que le viewport soit le même que la largeur de l'écran :

<meta name="viewport" content="width=device-width" />

En résumé

  • Les media queries permettent de charger des styles CSS différents en fonction de certains paramètres.

  • Les paramètres autorisés par les media queries sont nombreux : nombre de couleurs, résolution de l'écran, orientation… En pratique, on s'en sert surtout pour modifier l'apparence du site en fonction des différentes résolutions d'écran.

  • On crée une media query avec la directive @media suivie du type d'écran et d'une ou plusieurs conditions (comme la largeur maximale d'écran). Le style CSS qui suit sera activé uniquement si les conditions sont remplies.

  • Les navigateurs mobiles simulent une largeur d'écran : on appelle cela le viewport.

  • On peut cibler les smartphones grâce à une règle basée sur le nombre réel de pixels affichés à l'écran : max-device-width.

Example of certificate of achievement
Example of certificate of achievement