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 775 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 ThibaudArros

  le 24/09/2016

Comment sécuriser l'accès à vos dossiers et périphériques externes avec protection.exe ?

Certains de vos dossiers contiennent des fichiers confidentiels ? Vous avez perdu votre clé usb ? Sécuriser leur contenu avec un mot de passe.

Par L'informaticien

  le 02/04/2019

Regarder les chaines de sport RMC sport/Bein sport gratuitement [HD]

Dans ce tuto je vais vous montrer Regarder les chaines de sport RMC sport/Bein sport gratuitement [HD].

Par GmR

  le 29/10/2016

Effet vidéo VFX : figer un personnage dans une scène en mouvement (Blender/Gimp)

Tuto HD en Français pour faire un effet vidéo VFX : figer un personnage dans une scène en mouvement. avec Blender et Gimp

Par L'informaticien

  le 04/01/2017

Pirater un ordinateur sur le même réseau local avec Kali Linux

Salut Dans cette vidéo, je vais vous montrer comment pirater un ordinateur sur le même réseau local avec Kali Linux

Par TheWhiteHat

  le 14/10/2016

Comment supprimer Cortana de Windows 10 ?

Dans ce tutoriel nous allons voir comment retirer définitivement Cortana, l'assistante virtuelle, de Windows 10.

  Rejoins la communauté !


Tuto Aléatoire