@ MEDIA-QUERIES

Rôle

Les media-queries vont vous permettre d’adapter vos feuilles de style en fonction du type de média (affichage écran, impression..). Une des fonctionnalités des médias-queries est l’utilisation des requêtes qui permettent d’écrire des expressions qui vérifient des conditions particulières des médias, comme la largeurla hauteur ou la couleur, l’orientation (portrait, landscape), la résolution et plus encore..

L’utilisation des requêtes permet de faire du responsive design c’est à dire adapter le design d’un template en fonction des dimensions de l’écran. Une requête des médias se compose d’un type de support et de zéro ou plusieurs expressions qui vérifient les conditions particulières de fonctions multimédia.

Exemple de syntaxe : 

@media screen and (max-width: 300px) {
    h2{
        color:pink;
    }
}

Dans cet exemple, les titres de niveau 2 (sous-titre) seront colorés en rose sur les écrans d’appareil dont la largeur est compris entre 0 et maximum 300px

Type de média

Vous pouvez contrôler plusieurs types de support :

screen
Utilisé pour les écrans d’ordinateur, les tablettes, les smartphones, etc.

@media screen {
    
}
speech
Utilisé pour les lecteurs d’écran qui « lit » la page à haute voix

@media speech {

}
all
Utilisé pour tous les types de support

@media all {

}
print
Utilisé pour les imprimantes

@media print {

}

Syntaxe

Les médias-quéries définissent des expressions logiques dont la réponse est soit « vrai » soit « fausse ». Les feuilles de style seront appliquées si la condition est vérifiée. Vous pouvez donc utiliser des opérateurs :

and
Equivalent du ‘ET’. Le plus souvent utilisé : dans ce cas toutes les conditions doivent être vérifiées

@media screen and (min-width:640px) {

}
only
Signifie ‘UNIQUEMENT’

@media only screen {

}
not
Equivalent du ‘NON’

@media not screen {

}

Il est possible de reproduire le comportement du ‘OU’ en appelant différents media-queries à la suite, séparées par des virgules

@media screen, print {

}

Les caractéristiques

Les caractéristiques des médias ressemblent aux propriétés CSS: ils ont des noms et acceptent certaines valeurs. Il y a, cependant, plusieurs différences importantes entre les propriétés et les caractéristiques des médias

  • Les propriétés sont utilisés dans les expressions pour décrire les critères
  • On évite les caractères « < » et « > » qui peuvent entrer en conflit avec HTML et XML. On fait usage des préfixes min- et max- pour définir des valeurs minimales ou maximales à respecter
  • Les propriétés exigent toujours une valeur pour former une déclaration. Ex: max-width: 300px. Par contre les fonctionnalitées de média (comme ‘color’) peuvent former des expressions sans valeur

Vous pouvez adapter vos feuilles de styles selon plusieurs critères liés aux médias.

aspect-ratio
Valeur : ratio
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique le rapport entre la largeur et la hauteur de la zone d’affichage
device-aspect-ratio
Valeur : ratio
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique le rapport entre la largeur et la hauteur du dispositif

@media all and (device-aspect-ratio: 16/9) {
    
}
color
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de bits par composante de couleur pour le périphérique de sortie

@media all and (min-color: 2) {
    
}
color-index
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de couleurs que le périphérique peut afficher

@media all and (min-color-index: 256) {
    
}

 

device-height
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique la hauteur de l’appareil, comme un écran d’ordinateur. Cette valeur ne peut pas être négative

@media all and (device-height: 600px) {
    
}
device-width
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique la largeur de l’appareil, comme un écran d’ordinateur. Cette valeur ne peut pas être négative

@media all and (device-width: 800px) {
    
}
grid
Valeur : entier
S’applique à : tous
Préfixes min/max : nonIndique si le dispositif est un dispositif de grille (terminal ou petit téléphone avec une seule police) ou bitmap.

@media handheld and (grid) and (max-width: 12em) {
    
}

Pour les petits appareils, le em correspond à la largeur ou hauteur d’une cellule de la grille

height
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiSpécifie la hauteur de la zone d’affichage, comme une fenêtre de navigateur. Cette valeur ne peut pas être négative
width
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiSpécifie la largeur de la zone d’affichage, comme une fenêtre de navigateur. Cette valeur ne peut pas être négative
monochrome
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de bits par «couleur» sur un monochrome (échelle de gris)

@media screen and (min-monochrome: 2) {
    
}

Le CSS s’aplique aux dispositifs monochromes avec au moins 2 bits par pixels

orientation
Valeur : entier
S’applique à : landscape | portrait
Préfixes min/max : nonIndique si l’affichage est en mode paysage ou en mode portrait

@media screen and (orientation:portrait) {
    
}
resolution
Valeur : résolution
S’applique à : bitmap
Préfixes min/max : ouiIndique la résolution de l’appareil, en dpi ou dpcm

@media screen and (min-resolution: 300dpi) {
    
}
scan
Valeur : progressive | interlace
S’applique à : tv
Préfixes min/max : non
Indique le type de balayage d’un téléviseur

@media screen and (scan: progressive) {
    
}

Exemple de gabarit responsive

Utilisez Codepen.

– Le code CSS

– Le code HTML

Résultat

Tester le résultat sur une nouvelle page. Réduisez la taille de la fenêtre pour tester le responsive design

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
La commande @media est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9