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 625 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 HFortier

  le 16/11/2017

Comment utiliser YouTube en arrière plan ou écran éteint ?

Si vous désirez pouvoir utiliser YouTube pour écouter musique et podcast même écran éteint, ou en arrière plan, je vous montre dans cette courte vidéo

Par HFortier

  le 13/11/2016

Désactiver les notifications (Android)

Nombre d'applications affichent des notifications de manière intempestive, non sollicitée, ou alors à un rythme trop élevé. Voici comment les limiter.

Par Charlometre

  le 14/09/2016

Comment envoyer un email avec Python ?

Dans ce tutoriel, vous apprendrez comment envoyer des emails avec Python. Vous verrez également des exemples d'utilisation.

Par L'informaticien

  le 25/07/2018

Comment savoir si votre téléphone est original ou copié

Salut Dans ce tuto je vais vous montrer Comment savoir si votre téléphone est original ou copié

  Rejoins la communauté !


Tuto Aléatoire