Requêtes média CSS3 – Exemples
Requêtes média CSS – Plus d’exemples
Examinons d’autres exemples d’utilisation des requêtes multimédias.
Les requêtes multimédias sont une technique populaire pour fournir une feuille de style personnalisée à différents appareils. Pour illustrer un exemple simple, nous pouvons changer la couleur d’arrière-plan pour différents appareils :
Exemple
/* Définit la couleur de fond du corps sur bronzage */
corps {
couleur de fond : bronzage ;
}
/* Sur les écrans de 992 pixels ou moins, définissez la couleur d’arrière-plan sur bleu */
Écran @media et (largeur maximale : 992px) {
corps {
couleur de fond : bleu ;
}
}
/* Sur les écrans de 600 pixels ou moins, définissez la couleur d’arrière-plan sur olive */
Écran @media et (largeur maximale : 600px) {
corps {
couleur de fond : olive ;
}
}
Essayez-le vous-même »
Vous vous demandez pourquoi nous utilisons exactement 992px et 600px ? Ce sont ce que nous appelons des “points d’arrêt typiques” pour les appareils. Vous pouvez en savoir plus sur les points d’arrêt typiques dans notre didacticiel de conception Web réactive.
Requêtes multimédias pour les menus
Dans cet exemple, nous utilisons des requêtes multimédias pour créer un menu de navigation réactif, dont la conception varie selon les différentes tailles d’écran.
Exemple
/* Le conteneur de la barre de navigation */
.topnav {
débordement caché;
couleur de fond : #333 ;
}
/* Liens de la barre de navigation */
.topnav un {
flotteur : gauche ;
bloc de visualisation;
Couleur blanche;
aligner le texte : centrer ;
rembourrage : 14px 16px ;
décoration de texte : aucune ;
}
/* Sur les écrans de 600 pixels de large ou moins, les liens de menu s’empilent les uns sur les autres plutôt que les uns à côté des autres */
Écran @media et (largeur maximale : 600px) {
.topnav un {
flotteur : aucun ;
largeur : 100 % ;
}
}
Essayez-le vous-même »
Requêtes multimédias pour les colonnes
Une utilisation courante des requêtes multimédias consiste à créer une mise en page flexible. Dans cet exemple, nous créons une mise en page qui varie entre quatre, deux et pleine largeur, en fonction des différentes tailles d’écran :
Exemple
/* Crée quatre colonnes égales qui flottent les unes à côté des autres */
.colonne {
flotteur : gauche ;
largeur : 25 % ;
}
/* Sur les écrans de 992 pixels de large ou moins, passez de quatre colonnes à deux colonnes */
Écran @media et (largeur maximale : 992px) {
.colonne {
largeur : 50 % ;
}
}
/* Sur les écrans de 600 px de large ou moins, les colonnes s’empilent les unes sur les autres plutôt que les unes à côté des autres */
Écran @media et (largeur maximale : 600px) {
.colonne {
largeur : 100 % ;
}
}
Essayez-le vous-même »
Conseil: Une façon plus moderne de créer des dispositions de colonnes consiste à utiliser CSS Flexbox (voir l’exemple ci-dessous). Cependant, il n’est pas pris en charge dans Internet Explorer 10 et les versions antérieures. Si vous avez besoin d’un support IE6-10, utilisez des flottants (comme indiqué ci-dessus).
Pour en savoir plus sur le module Flexible Box Layout, lisez notre chapitre CSS Flexbox.
Pour en savoir plus sur le Responsive Web Design, lisez notre Tutoriel sur le Responsive Web Design.
Exemple
/* Conteneur pour boîtes flexibles */
.ligne {
affichage : flexible ;
flex-wrap : enveloppe ;
}
/* Crée quatre colonnes égales */
.colonne {
flex : 25 % ;
rembourrage : 20px ;
}
/* Sur les écrans de 992 pixels de large ou moins, passez de quatre colonnes à deux colonnes */
Écran @media et (largeur maximale : 992px) {
.colonne {
flexibilité : 50 % ;
}
}
/* Sur les écrans de 600 px de large ou moins, les colonnes s’empilent les unes sur les autres plutôt que les unes à côté des autres */
Écran @media et (largeur maximale : 600px) {
.ligne {
flex-direction : colonne ;
}
}
Essayez-le vous-même »
Masquer les éléments avec les requêtes multimédias
Une autre utilisation courante des media queries consiste à masquer des éléments sur différentes tailles d’écran :
Je serai caché sur de petits écrans.
Exemple
/* Si la taille de l’écran est de 600 pixels de large ou moins, masquez l’élément */
Écran @media et (largeur maximale : 600px) {
div.exemple {
affichage : aucun ;
}
}
Essayez-le vous-même »
Modifier la taille de la police avec les requêtes multimédias
Vous pouvez également utiliser des requêtes multimédias pour modifier la taille de la police d’un élément sur différentes tailles d’écran :
Exemple
/* Si la taille de l’écran est supérieure à 600 pixels de large, définissez la taille de la police sur 80 pixels */
Écran @media et (min-width : 600px) {
div.exemple {
taille de police : 80px ;
}
}
/* Si la taille de l’écran est de 600 pixels de large ou moins, définissez la taille de la police de
sur 30 pixels */
Écran @media et (largeur maximale : 600px) {
div.exemple {
taille de police : 30 px ;
}
}
Essayez-le vous-même »
Galerie d’images flexible
Dans cet exemple, nous utilisons des requêtes multimédias avec flexbox pour créer une galerie d’images réactive :
Site Web flexible
Dans cet exemple, nous utilisons des requêtes multimédias avec flexbox pour créer un site Web réactif, contenant une barre de navigation flexible et un contenu flexible.
Orientation : Portrait / Paysage
Les requêtes média peuvent également être utilisées pour modifier la mise en page d’une page en fonction de l’orientation du navigateur.
Vous pouvez avoir un ensemble de propriétés CSS qui ne s’appliqueront que lorsque la fenêtre du navigateur est plus large que sa hauteur, une orientation dite “Paysage”:
Exemple
Utilisez une couleur d’arrière-plan bleu clair si l’orientation est en mode paysage :
Écran @media uniquement et (orientation : paysage) {
corps {
couleur de fond : bleu clair ;
}
}
Essayez-le vous-même »
Largeur minimale à largeur maximale
Vous pouvez également utiliser le (max-width: ..) and (min-width: ..) valeurs pour définir une largeur minimale et une largeur maximale.
Par exemple, lorsque la largeur du navigateur est comprise entre 600 et 900 pixels, modifiez l’apparence d’un élément
Exemple
Écran @media et (max-width : 900px) et (min-width : 600px) {
div.exemple {
taille de police : 50px ;
rembourrage : 50px ;
bordure : 8px noir uni ;
fond : jaune ;
}
}
Essayez-le vous-même »
En utilisant une valeur supplémentaire : Dans l’exemple ci-dessous, nous ajoutons une requête multimédia supplémentaire à celle déjà existante en utilisant une virgule (cela se comportera comme un opérateur OR) :
Exemple
/* Lorsque la largeur est comprise entre 600px et 900px OU au-dessus de 1100px – change l’apparence de
Écran @media et (max-width : 900px) et (min-width : 600px), (min-width : 1100px) {
div.exemple {
taille de police : 50px ;
rembourrage : 50px ;
bordure : 8px noir uni ;
fond : jaune ;
}
}
Essayez-le vous-même »
Référence CSS @media
Pour un aperçu complet de tous les types de médias et fonctionnalités/expressions, veuillez consulter la règle @media dans notre référence CSS.
Conseil: Pour en savoir plus sur la conception Web réactive (comment cibler différents appareils et écrans), en utilisant les points d’arrêt de requête multimédia, lisez notre didacticiel sur la conception Web réactive.
#Requêtes #média #CSS3 #Exemples