Le responsive design avec les media queries en css !

Adapter son site aux mobiles avec les media-queries

Aujourd’hui, ne pas avoir un site adapté aux mobiles n’est pas concevable. Tous les sites Web aujourd’hui devraient prendre en considération l’aspect « responsive design ».

Le responsive design, c’est quoi ?

Le responsive design ou responsive webdesign (site mobile) est une technique de conception d’ un site web, visant à ce que le site et son contenu, s’adaptent automatiquement à la résolution écran du terminal qui est utilisé pour le visiter (tablettes, smartphones…). On facilite l’accès et l’expérience utilisateur en fonction de l’appareil utilisé par ce dernier.

Pour se faire, on utilisera les dernières techniques de programmation web en HTML 5 et les « media queries » en CSS3 qui permettent de modifier et d’adapter la largeur des éléments HTML dans la feuilles de style css, donc sans multiplier les versions d’un même contenu.

On précisera certains styles par exemple pour les écrans tablettes, d’autres styles css pour les écrans iphones … (redimensionner une image, organiser le contenu différemment) ou même supprimer des éléments tout court avec display : none;

Pensez responsive avec les media-queries !

Un site mobile, dit aussi “responsive”, s’adapte donc aux différents écrans de téléphone et aux tablettes.
Comment procéder exactement ?

Pour créer un site mobile, on peut développer de plusieurs manières :

une version mobile dédiée : on aura donc au final un site pour une version mobile et une autre version de site pour un écran d’ordinateur (donc deux codes à modifier et des url différentes..et plus de maintenance aussi !)

une version responsive design avec l’utilisation des medias queries en CSS3 qui vont permettre d’adapter notre css aux différentes tailles d’écran et de varier aussi les éléments à afficher ou non sur la version mobile; en effet ça arrive souvent que l’on décide de supprimer certains éléments pour la version mobile par rapport à la version ordinateur (desktop) après avoir défini le style d’une page en fonction de plusieurs paramètres liés à la taille d’affichage : largeur, hauteur, l’orientation, résolution.

Les media-queries, c’est quoi ?

Avec les media-queries, on a pas besoin de toucher au code html pour être responsive, mais seulement le CSS où l’on va adapter l’affichage de la page en fonction de la taille de l’écran.
La plupart des navigateurs actuels comme Firefox, Internet Explorer, Chrome, Safari, iOS Safari, Android, Opera Mini, Opera Mobile et BlackBerry sont compatibles avec cette fonctionnalité.

On utilise les media-queries avec la propriété css @media, @import ou l’attribut media de la balise HTML <link> ou <style>.
Les Media Queries sont composés de plusieurs éléments :

  • l’attribut media
  • les propriétés
  • les opérateurs logiques qui lient les deux premiers

N’oubliez pas de déclarer votre balise meta viewport dans votre document html

L’attribut @media

L'attribut @media

Les propriétés

Les propriétés

Les opérateurs logiques

Les opérateurs logiques
Un exemple concret

 

 

VOIR AUSSI

 

Partagez ce contenu !Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone
Votes sur cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *