Responsive Design – Les @media queries

LEÇON

 

Avant de commencer : La balise meta/viewport

Rappel : avec Responsive Design on adapte, selon la largeur de l'écran, la largeur et l'agencement des éléments présents dans le contenu via le CSS.

Clé donc est la détection de la largeur de l'écran.

Problème : par défaut, certains appareils mobiles se font passer pour des appareils avec une largeur supérieure à leur largeur réelle. Dans ce cas, un facteur zoom corrige la différence entre le nombre de pixels virtuels et réels.

Ainsi un écran iPhone 4 de 320 pixels de large peut apparaître comme un écran de 640px. Ceci est problématique car les règles CSS qui visent un écran de 320 pixels ne vont pas être déclenchées si la détection de largeur d'écran donne 640px. Le site s'affichera comme sur un appareil de 640px avec un factuer zoom de 0,5. Résultat : texte trop petit pour lire et l'agencement non-optimisé des éléments dans la page.

Pour éviter ce comportement par défaut de certains appareils on exploite la balise meta pour spécifier que le viewport (la taille logique) doit être identique a la taille réelle de l'écran.


<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0">
        ...
    </head>
    <body>
    ...
    </body>
</html>

 

CSS et les @media queries

Les @media queries (également appelés les @media rules) sont exploités en CSS pour détecter des attributs de l'appareil dans le but d'appliquer des styles selon ces attributs.

Par exemple, si on veut appliquer certains styles dans le cas des écrans étroits, on peut créer des règles de type @media query pour viser les écrans étroits, puis associer des styles à ces règles.

Exemple :

 

test.css


body
{
  width:1000px;
  margin:0 auto;
  padding:0;
  background:white;
  font-family:Tahoma, Verdana, Helvetica, Arial, sans-serif;
  font-weight:normal;
  font-size:14px;
}

@media screen and (max-width: 1050px)
{
    body
    {
      width:800px;
    }
}

@media screen and (max-width: 850px)
{
    body
    {
      width:600px;
    }
}

 

test.html


<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TEST</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>

        <div style="background-color:skyblue; padding:20px; margin:0;">

		 <h4>Lorem ipsum dolor</h4>
		 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae rhoncus eros.
		 Curabitur at vehicula urna. Morbi molestie accumsan nunc, lacinia fermentum est
		 maximus vitae. Vivamus quis lacus augue. Cras dapibus sagittis augue, ut vestibulum
		 tellus feugiat sit amet. Suspendisse potenti. Integer suscipit leo id ante mattis
		 ullamcorper. Maecenas eget egestas risus, sit amet scelerisque sem. Donec pharetra,
		 tellus et faucibus pulvinar, purus nunc cursus ligula, non tristique sapien nunc at
		 erat. Vivamus lectus nunc, congue a quam in, imperdiet condimentum felis.</p>
		 <h4>Lacinia fermentum est maximus vitae</h4>
		 <p>Tellus feugiat sit amet. Suspendisse potenti. Integer suscipit leo id ante mattis
		 ullamcorper. Maecenas eget egestas risus, sit amet scelerisque sem. Donec pharetra,
		 tellus et faucibus pulvinar, purus nunc cursus ligula, non tristique sapien nunc at
		 erat. Vivamus lectus nunc, congue a quam in, imperdiet condimentum felis.
		 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae rhoncus eros.
		 Curabitur at vehicula urna. Morbi molestie accumsan nunc, lacinia fermentum est
		 maximus vitae. Vivamus quis lacus augue. Cras dapibus sagittis augue, ut vestibulum.
		 Ornare diam, sit amet auctor lacus tellus vitae diam. Fusce finibus aliquam ligula,
		 ut pellentesque eros congue et. Integer et suscipit mi, vel molestie felis. Vivamus
		 commodo risus neque, vitae vulputate purus pulvinar eget. In dictum, risus eget faucibus
		 eleifend, lectus lacus euismod sapiens.</p>
		 <h4>Maecenas et ipsum libero</h4>
		 <p>Morbi commodo lacus sit amet placerat dictum. Pellentesque habitant morbi tristique
		 senectus et netus et malesuada fames ac turpis egestas. Donec in lobortis dui, eu
		 commodo elit. Maecenas et ipsum libero. Cras varius, magna at tincidunt dictum, velit
		 eros ornare diam, sit amet auctor lacus tellus vitae diam. Fusce finibus aliquam ligula,
		 ut pellentesque eros congue et. Integer et suscipit mi, vel molestie felis. Vivamus
		 commodo risus neque, vitae vulputate purus pulvinar eget. In dictum, risus eget faucibus
		 eleifend, lectus lacus euismod sapien, eu tristique nisl libero gravida augue.</p>
		 <h4>Morbi tristique sodales ornare</h4>
		 <p>Ornare diam, sit amet auctor lacus tellus vitae diam. Fusce finibus aliquam ligula,
		 ut pellentesque eros congue et. Integer et suscipit mi, vel molestie felis. Vivamus
		 commodo risus neque, vitae vulputate purus pulvinar eget. In dictum, risus eget faucibus
		 eleifend, lectus lacus euismod sapien, eu tristique nisl libero gravida augue.</p>
		 <h4>Lacinia fermentum est maximus vitae</h4>
		 <p>Tellus feugiat sit amet. Suspendisse potenti. Integer suscipit leo id ante mattis
		 ullamcorper. Maecenas eget egestas risus, sit amet scelerisque sem. Donec pharetra,
		 tellus et faucibus pulvinar, purus nunc cursus ligula, non tristique sapien nunc at
		 erat. Vivamus lectus nunc, congue a quam in, imperdiet condimentum felis.
		 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae rhoncus eros.
		 Curabitur at vehicula urna. Morbi molestie accumsan nunc, lacinia fermentum est
		 maximus vitae. Vivamus quis lacus augue. Cras dapibus sagittis augue, ut vestibulum.
		 Ornare diam, sit amet auctor lacus tellus vitae diam. Fusce finibus aliquam ligula,
		 ut pellentesque eros congue et. Integer et suscipit mi, vel molestie felis. Vivamus
		 commodo risus neque, vitae vulputate purus pulvinar eget. In dictum, risus eget faucibus
		 eleifend, lectus lacus euismod sapiens.</p>
		 <h4>Maecenas et ipsum libero</h4>
		 <p>Morbi commodo lacus sit amet placerat dictum. Pellentesque habitant morbi tristique
		 senectus et netus et malesuada fames ac turpis egestas. Donec in lobortis dui, eu
		 commodo elit. Maecenas et ipsum libero. Cras varius, magna at tincidunt dictum, velit
		 eros ornare diam, sit amet auctor lacus tellus vitae diam. Fusce finibus aliquam ligula,
		 ut pellentesque eros congue et. Integer et suscipit mi, vel molestie felis. Vivamus
		 commodo risus neque, vitae vulputate purus pulvinar eget. In dictum, risus eget faucibus
		 eleifend, lectus lacus euismod sapien, eu tristique nisl libero gravida augue.</p>
		 <h4>Morbi tristique sodales ornare</h4>
		 <p>Ornare diam, sit amet auctor lacus tellus vitae diam. Fusce finibus aliquam ligula,
		 ut pellentesque eros congue et. Integer et suscipit mi, vel molestie felis. Vivamus
		 commodo risus neque, vitae vulputate purus pulvinar eget. In dictum, risus eget faucibus
		 eleifend, lectus lacus euismod sapien, eu tristique nisl libero gravida augue.</p>

         </div>

    </body>
</html>

 

Mode "Vue adaptative" dans Mozilla Firefox

Pour tester les pages en Responsive Design nous avons un outil formidable dans Firefox qui s’appelle le mode "Vue Adaptative". Pour déclencher ce mode : dans le menu principal choisir Outils / Développement Web / Vue adaptative. La fenêtre principale du navigateur se transforme pour vous donner la possibilité de changer les dimensions de l'écran et voir le comportement en direct.

Mini-exercice : recréer l'exemple ci-dessus et ouvrir la page test.html avec Firefox et passer en vue adaptative. Remarquer les bascules qui se font à 1050px et 850 px de largeur.

 

 

ATTENTION : l'ordre des règles dans le CSS est très important. Si on inverse les 2 règles dans l'exemple ci-dessus, la bascule à 850px ne marche plus.

Mini-exercice : Faire un test avec les règles inversées et voir le comportement. Puis essayer de trouver pourquoi.

 

Il n'y a pas que le max-width à viser...

Dans l'exemple ci-dessus on a visé, avec nos @media queries, les écrans avec une certaine largeur via la propriété max-width. Et pour le Responsive Design c'est souvent la propriété max-width qui nous préoccupe.

Mais il est bien de savoir qu'il y a plein d'autres propriétés qu'on peut viser. Pour plus d'information, voir la page des @media rules sur w3schools.