Media Queries - Adapter le CSS selon le type d'écran, l'appareil, etc.

Salut !

MAJ Onyx 04/04/2017 : Le tutoriel a été modifié et bonifié grâce au tutoriel de alsacréations que vous pouvez également lire si vous le souhaitez ^^

Vous vous demandez sûrement à quoi peuvent servir les media queries ? C'est simple, comme écrit dans le titre au-dessus, ils permettent d'adapter la mise en page (css) selon le type d'écran, l'appareil utilisé, le type d'impression et autre.

Grâce à eux, on pourra avoir le même rendu d'une page web, d'un site ou d'un forum sur une tablette, un netbook (un mini ordinateur, donc un écran plus petit) et un ordinateur normal. En gros, les media queries règlent les problèmes d'affichages par rapport au types d'écrans qu'on utilise, ce qui est nettement plus agréable quand on est sur un forum par exemple.

Premièrement, regardons certains types de media queries possibles :
screen = Écran
handheld = Appareils mobiles ou de petite taille
print = Impression (parce que je suis une troll qui aime faire disparaître des choses quand les gens impriment, bwahahaha *Onyx se fait kicker*)
aural (CSS 2.0) / speech (CSS 2.1) = Synthèses vocales (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
braille = Plages braille (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
embossed = Imprimantes braille (pour les personnes aveugles ou ayant un handicap visuel)
projection = Projecteurs
tv = Télévision (Pour ceux qui aiment les gros écrans et branchent leur ordinateur à une télévision par exemple)

Comme vous le constatez, les media queries nous permettent de voir quel média est utilisé pour regarder/utiliser votre site/forum.

Les media queries fonctionnent un peu comme si cela envoyait un message à votre appareil qui dit "est-tu un screen?" ou "es-tu une télévision?" et votre appareil répond par "oui" ou "non".

Vous pouvez même vous amuser à plus d'information dans les questions de media, comme "es-tu un screen ET as-tu une largeur d'écran de moins de 1024px?". Comment? On va le voir, ne vous inquiétez pas ^^

À noter que la plupart des mobiles sont frustrants et se considèrent comme "screen" à la place de "handheld", malheureusement.

---

Passons à la pratique, donc comment utiliser les médias.

Commençons en passant par notre CSS :

Code:

/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui ne dépassent pas 1024px*/
@media screen and (max-width: 1024px) {
  .nomdeclass {
    propriété: valeur;
  }
}

Le "screen" and (max-width: 1024px)" veut dire quel code sera appliqué quand si le visiteur utilise un screen (écran) dont la largeur ne dépasse pas 1024px.

---

On peut aussi adapter la mise en page à des écrans compris par exemple entre 1024px et 1280px.

Dans ce cas, notre code sera comme ceci :

Code:

/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui dépassent 1024px et ne dépassent pas 1280px*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .nomdeclass {
    propriété: valeur;
  }
}

Grâce à ça, les problèmes d'affichage de la page en fonction du type d'écran utilisé peut être réglé pour que cela soit plus agréable à regarder ^^

---

Histoire de ne pas surcharger notre page de CSS, il est également possible d'utiliser une feuille de CSS externe.

Pour ce faire, vous ajoutez ce bout de code dans la balise "head" de votre template Overhall_header :

Code:

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="URL DE LA FEUILLE DE CSS" type="text/css" />

Comme vu plus haut, vous modifiez l'attribut "media" par ce que vous voulez affecter comme "screen and (max-width: 1024px)" ou "screen and (min-width: 1024px) and (max-width: 1280px)".
Vous mettez ensuite le lien de votre feuille CSS à la place de URL DE LA FEUILLE DE CSS.

Pour ce qui est de comment héberger une feuille de CSS, je vous réfère à ce tutoriel.

---

Quand on ajoute du CSS média à notre CSS de base, il ne faut pas oublier que c'est un ajout. Du coup, tout ce qu'il y a dans le CSS de base s'applique en premier et le CSS média va venir s'appliquer après le CSS de base.

Exemple :
J'ai une image à laquelle j'ai donné la largeur 500px et un bloc auquel j'ai donné un background bleu dans mon CSS de base.
Je ne mets rien dans le CSS média pour "écran de plus de 1280px".
L'image sera quand même à 500px de largeur et le bloc sera quand même bleu pour un "écran de plus de 1280px" parce que je n'ai pas indiqué le contraire dans mon CSS média.

---

C'est tout ce qui me passe à l'esprit, soyez indulgents envers-moi, c'est ma première fois ^^

Super tuto ! C'est de choses simples comme ça que j'ai besoin pour mon forum ^^ Surtout que de plus en plus d'utilisateurs sont sur tablette (=

C'est tout simplement super comme astuce merci beaucoup :)

Merci （’-’*)

Merci mais on pourrait avoir un exemple concret ?? je vous avouerai avoir à peu prés compris le principe mais en application, c'est autre chose. si par exemple on souhaite l'appliquer au body, on fait comment ?