20
MAI

CSS3 Media Queries - Adapter un site à plusieurs résolutions d'écran

Publié le 20/05/11 à 10h12 par DJo

Les Medias Queries sont des propriétés CSS permettant d'adapter une page HTML à différents types d'écrans et résolutions.

Les Medias Queries sont des propriétés CSS permettant d'adapter une page HTML à différents types d'écrans et résolutions.

Imaginons que vous ayez développé un site web adapté aux résolutions classiques: 1024px / 1280px de largeur, qu'avec la démocratisation des smartphones et tablettes, vous souhaitiez rendre votre site compatible sur ces écrans, sans toucher au HTML...

Grâce aux CSS3 medias queries, extensions des types media en CSS2 (print, screen), c'est possible !

Voici quelques exemples de medias queries pratiques que vous pourriez utiliser sur vos prochaines réalisations web:

 

Adapter le style de la page web en fonction des dimensions du navigateur via les medias queries

Il peut être intéressant de connaître les dimensions de la zone d'affichage du navigateur de notre visiteur pour adapter au mieux la taille des listes, colonnes etc.

Voici comment c'est possible en quelques lignes d'assigner un style particulier pour les navigateurs ayant pour largeur mini 400px et maxi 700px

@media screen and (min-width: 400px) and (max-width: 700px) { 
    /* Les propriétés CSS ici */
}

 

Contrôler la résolution de l'écran du smartphone, tablette, écran...

En plus de pouvoir contrôler les dimensions du navigateur, il est possible de contrôler directement la résolution du périphérique: Smartphone, tablette, écran PC...

@media screen and (min-device-width: 800px) {
    /* Styles appliqués aux terminaux ayant une résolution mini de 800px */
}

Il est possible de supprimer les prefixes min- et max- pour cibler uniquement ceux qui ont la résolution exacte.

 

Gérer l'orientation avec les medias queries

Très pratique pour les smartphones et tablettes, il est possible de contrôler l'orientation de l'appareil et d'adapter alors le style de la page en fonction: Mettre un menu à gauche quand on est en paysage ou au dessus quand on est en portrait par exemple.

/* Orientation Portrait */
@media screen and (orientation:portrait) {
    /* Styles à adapter pour le mode portrait */
}
/* Orientation Paysage */
@media screen and (orientation:landscape) {
    /* Styles à adapter pour le mode paysage */
}

 

Adapter le style de sa page suivant le ratio de l'écran du visiteur

Si vous souhaitez adapter votre page au ratio de l'écran du visiteur, il faut utiliser l'instruction device-aspect-ratio:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }

 

Les possibilités sont très nombreuses, je vous invite à consulter la documentation W3C officielle à ce sujet pour en savoir plus.

Attention toutefois, les medias queries ne sont pas prises en charge par les IE < 9 ... Il faudra utiliser des parades JS comme le plugin jQuery Media Queries (Seulement prise en charge de width / height...)

 

Vocii quelques exemples de réalisations utilisant des Medias Queries:

Exemples de sites utilisant les medias queries CSS3

Exemples de sites utilisant les medias queries CSS3

Exemples de sites utilisant les medias queries CSS3

 

Vous pourrez retrouver plus d'exemples de réalisations de ce type sur le site mediaqueri.es

N'hésitez pas à publier vos sites en commentaires si vous avez mis en place des medias queries.

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web