Comment faire des media queries en CSS ?  

Partagé par ThibaudArros le 24/10/2016  —  3 min de lecture

tutoriel-comment-faire-des-media-queries-en-css
5 LIGHTS 597 PERSONNES AIDÉES  

avatar ThibaudArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Pré-requis pour ce tutoriel :

  • Une connexion internet
  • Un navigateur internet


Qu'est-ce qu'une media query

Les media queries sont des règles CSS que l'on peut appliquer selon certaines conditions. Vous allez pouvoir dire « Si la résolution de l'écran du visiteur est inférieure ou supérieure à tant, alors applique les propriétés CSS suivantes ». Cela permet de modifier l'apparence de votre site web sous certaines conditions : vous pourrez diminuer la taille du texte, changer la couleur de fond, positionner différemment les blocs, 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... Bien que son utilisation principale concerne la taille des écrans dans un souci de responsive design, les possibilités sont très nombreuses !

Appliquer une media query

Méthode n°1 : plusieurs feuilles de style

Imaginons que tout le code CSS de notre site web soit regroupé dans un fichier «style.css».

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

Nous avons la possibilité d'y ajouter un attribut media afin d'adapter l'inclusion d'un autre fichier lorsque la taille sera inférieure à 640 pixels par exemple.

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


Ainsi, plusieurs fichiers CSS constituent donc notre code.

<!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="style_smartphone .css" /> <!-- Pour ceux qui ont une résolution inférieure à 640px -->
        <title>Media queries</title>
    </head>
    <body>
    </body>
</html>

Méthode n°2 : chargement directement dans la feuille de style

Une autre technique 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 «style.css» comme ceci :

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


Les règles disponibles

De nombreuses règles permettent de construire des media queries :

  • 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.
    • screen : écran « classique » ;
    • handheld : périphérique mobile ;
    • print : impression ;
    • tv : télévision ;
    • projection : projecteur ;
    • all : tous les types d'écran.

On peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc.

Combiner des règles

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

  • only : « uniquement »
  • and : « et »
  • not : « non »

Quelques exemples

/* 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: 640px) and (max-width: 960px) {}
/* Sur tous types d'écrans orientés horizontalement (paysage) */
@media all and (orientation: landscape) {}
/* Sur les téléviseurs */
@media tv {}

avatar ThibaudArros   (Level 7)
Intérêt : Informatique

Ce tuto t'a aidé ? Partage-le !



Tu as toi aussi des astuces ou des compétences à partager ? Ou tu souhaites tout simplement apprendre ? Rejoins notre communauté en t'inscrivant !


Commentaires (0)

Connecte-toi ou inscris-toi pour rédiger un avis.

Lis aussi . . .

Par CRFormations

  le 06/12/2016

Fotosketcher - freeware de retouche d'images - vidéo 2/3

Il vous permet de réaliser des dessins et peintures du plus bel effet depuis vos images et photos en quelques clics - à découvrir absolument !

Par L'informaticien

  le 29/11/2017

Glary Malware Hunter :le meilleur Anti Malware

Salut Dans cette vidéo, je vais vous montrer Glary Malware Hunter :le meilleur Anti Malware

Par L'informaticien

  le 28/07/2018

Télécharger video youtube gratuitement et facilement

Dans ce tuto je vais vous montrer Comment télécharger video youtube gratuitement et facilement

Par L'informaticien

  le 19/12/2018

La meilleure application 2019 pour regarder des Films/series Gratuitement [FR]

Salut Dans ce tuto je vais vous montrer La meilleure application 2019 pour regarder des Films/series Gratuitement [FR]

Par GmR

  le 09/01/2017

GIMP: Mettre un texte sur une photo

GIMP: Mettre un texte sur une photo

  Rejoins la communauté !


Tuto Aléatoire