Web design : comment utiliser les media queries pour un site responsive ?

CSS utiliser les médias queries

Sur Graphiste.com, recevez rapidement des devis pour réaliser votre projet HTML & CSS. Trouver un freelance disponible

Avant, il était possible de développer une version desktop et une version mobile. Mais ça, c’était avant la multiplication des modèles de smartphones, tablettes, phablettes et ordinateurs portables.

Les différentes tailles d’écran ont amené le responsive design qui permet d’adapter votre site à toutes les résolutions d’écran. Comment est-ce possible ? Grâce aux media queries, des règles permettant d’adapter un design à différentes tailles d’écran et optimiser la disposition graphique de sa page.

Découvrez ce concept et des exemples concrets pour les utiliser.

Les media queries, ces règles qui facilitent l’affichage multi-écrans

Les media queries sont apparues avec CSS3. Dans la famille des règles et non des propriétés, elles permettent de définir une “fourchette” au-delà de laquelle l’affichage doit-être différent.

On juge qu’une résolution moyenne d’écran est :

  • Desktop : au delà de 1024 pixels
  • Tablette : entre 600 et 1024 pixels (en mode portrait)
  • Mobile : entre 320 et 600 pixels (en mode portrait)

La taille moyenne d’un écran mobile est plutôt de 480 pixels. Pour être plus précis vous verrez dans cet article comment utiliser la règle device-width plutôt que width seule. À noter que la partie visible sur smartphone est appelée le viewport.

En appliquant ces règles, le design d’un site s’adaptera automatiquement en fonction de l’écran de l’internaute. Pour les webdesigners et les développeurs front, cette technique simplifie énormément le travail d’adaptation du site au mobile. D’ailleurs, si vous avez besoin d’une adaptation ou si vous avez une création de site en version mobile en cours, trouvez des designers experts en responsive design sur Graphiste.com.

Les règles media queries énoncent clairement lorsque la propriété CSS doit être appliquée. Pour les mettre en place, il existe deux options :

  • Vous pouvez écrire la règle textuellement dans votre fichier .css (résolution inférieure ou égale à 1024 pixels > utiliser les propriétés CSS suivantes)
  • ou bien, vous pouvez charger une feuille de style.css propre à chaque règle et dimension. (résolution inférieure ou égale à 1024 pixels > utiliser les propriétés contenues dans le fichier mobile_resolution.css)

Pour créer les media queries, vous devez respecter le formalisme suivant :

  • commencer par @media ;
  • indiquer le type d’écran ;
  • plusieurs conditions comme la largeur maximum de l’écran ;
  • puis le style CSS que vous souhaitez appliquer sous ces conditions préétablies.

Cas pratiques : les principaux usages des media queries en responsive design

Les media queries sont devenues très courantes dans les dernières versions responsive des sites développés en HTML5 et CSS3. Les changements qu’elles peuvent engendrer sont nombreux et vont au-delà de la résolution d’écran :

  • La couleur
  • L’orientation
  • La taille des fenêtres
  • La taille de l’écran
  • Le type de media, notamment pour les mobiles

Voici une liste des principaux usages que vous pourriez en faire.

Menu burger

Un classique de la version mobile, le menu d’un site web doit être réduit et optimisé sur mobile. Il peut changer de forme en utilisant les media queries.

Voici comment amener le menu en haut de la page et supprimer le style des éléments de la version desktop (bordures, marges, survol, etc…).

@media only screen and (min-width: 268px) {
a.to.nav {
display: none ;
}
.wrapper {
position: relative ;
width: 768px ;
margin: auto ;
}
#primery_nav {
position: absolute ;
top: 5px ;
right: 10px ;
background: none ;
}
#primery_nav li {
diplay: inline ;
}
#primery_nav li a {
float: left ;
border: none ;
padding: 0 10px ;
-webkit-border-radius: 2px ;
-moz-border-radius: 2px ;
border-raidus: 2px ;
}
}

La page et la fenêtre

Pour adapter l’affichage de votre page sur l’écran de votre visiteur, il est indispensable d’en contrôler sa taille grâce à la règle max-width. Nous parlons beaucoup de la largeur d’écran car c’est la variable la plus visible en responsive design, mais il est tout à fait possible de faire également varier la hauteur avec la règle max ou min-height.

Voici les exemples de media queries du Framework CSS Bootstrap :

  • @media(max-width:767px){}
  • @media(min-width:768px){}
  • @media(min-width:992px){}
  • @media(min-width:1200px){}

Les polices

Elément indispensable de la lisibilité et l’accessibilité d’un site, les polices doivent constamment s’adapter à la taille de l’écran. Inutile d’imaginer votre visiteur lisant sur mobile en texte en taille 4 pixels (la taille moyenne d’un texte sur mobile est 16 pixels) !

Adoptez les media queries pour définir qu’en-dessous d’une certaine largeur d’écran, les polices devront être grossies. Voici l’exemple pour votre titre H1 :

h1 {
font-size: 5em;
}
@media only screen and (max-width: 320px) {
h1 {
font-size: 3em;
}
}

Lire aussi : Application mobile : les règles typographiques à respecter

Épurer la version mobile

Lorsqu’un site n’est pas développé en mobile first, on constate souvent que la version web est beaucoup trop dense pour une lecture optimale sur smartphone.

Les media queries permettent alors de définir quels sont les éléments à “masquer” en dessous d’une certaine résolution d’écran. Il peut s’agir de :

  • Bannière, slider dans un header
  • Bloc de logos dans le footer
  • Éléments placés dans des barres latérales du site

Pour masquer un élément, utilisez la propriété display en indiquant la valeur none.

Si vous souhaitez tout de même conserver les blocs latéraux de votre site web, utilisez les media queries pour les placer en-dessous de votre contenu et éviter le scroll latéral (à bannir en navigation mobile !).

Pour déplacer un bloc sous un contenu, utilisez la balise <aside>. Pour cibler uniquement les mobiles, utilisez la règle basée sur le nombre réel de pixel : max-device-width.

 

Vous l’aurez compris, les media queries sont des règles essentielles à respecter pour tout web designer souhaitant travailler sa disposition graphique conformément aux exigences du responsive design.

Lire aussi : Guide CSS : 10 bonnes pratiques à respecter dans votre feuille de style