@ 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 largeur, la 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;
    }
}

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é

La commande @media est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9