CSS
Requêtes médias

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Recherche…


Syntaxe

  • @media [pas | seulement] mediatype et (fonction média) {/ * Règles CSS à appliquer * /}

Paramètres

Paramètre Détails
mediatype (Facultatif) C'est le type de support. Pourrait être n'importe quoi dans la gamme de all à l' screen .
not (Facultatif) N'applique pas le CSS pour ce type de média particulier et s'applique à tout le reste.
media feature Logique pour identifier les cas d'utilisation pour CSS. Options décrites ci-dessous.
Fonction média Détails
aspect-ratio Décrit le rapport d'aspect de la zone d'affichage ciblée du périphérique de sortie.
color Indique le nombre de bits par composant couleur du périphérique de sortie. Si le périphérique n'est pas un périphérique couleur, cette valeur est égale à zéro.
color-index Indique le nombre d'entrées dans la table de couleurs pour le périphérique de sortie.
grid Détermine si le périphérique de sortie est un périphérique de grille ou un périphérique bitmap.
height La fonction de support de hauteur décrit la hauteur de la surface de rendu du périphérique de sortie.
max-width CSS ne s'appliquera pas sur une largeur d'écran supérieure à celle spécifiée.
min-width CSS ne s'appliquera pas sur une largeur d'écran inférieure à celle spécifiée.
max-height CSS ne s'appliquera pas à une hauteur d'écran plus grande que celle spécifiée.
min-height CSS ne s'appliquera pas sur une hauteur d'écran plus courte que celle spécifiée.
monochrome Indique le nombre de bits par pixel sur un périphérique monochrome (échelle de gris).
orientation CSS affichera uniquement si le périphérique utilise l'orientation spécifiée. Voir les remarques pour plus de détails.
resolution Indique la résolution (densité de pixels) du périphérique de sortie.
scan Décrit le processus de numérisation des périphériques de sortie de télévision.
width La fonctionnalité de support de largeur décrit la largeur de la surface de rendu du périphérique de sortie (telle que la largeur de la fenêtre du document ou la largeur du bloc de page sur une imprimante).
Fonctionnalités obsolètes Détails
device-aspect-ratio Deprecated CSS Deprecated ne s'affichent que sur les appareils dont le rapport hauteur / largeur correspond au ratio spécifié. Ceci est une fonctionnalité deprecated et il n'est pas garanti que cela fonctionne.
max-device-width Deprecated Même que max-width mais mesure la largeur de l'écran physique, plutôt que la largeur d'affichage du navigateur.
min-device-width Deprecated Même que min-width mais mesure la largeur de l'écran physique plutôt que la largeur d'affichage du navigateur.
max-device-height Deprecated Même que max-height mais mesure la largeur de l'écran physique plutôt que la largeur d'affichage du navigateur.
min-device-height Deprecated Même que min-height mais mesure la largeur de l'écran physique, plutôt que la largeur d'affichage du navigateur.

Remarques

Les requêtes multimédias sont prises en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Opera et Internet Explorer 9 et versions ultérieures.

Il est important de noter que la fonction de support d' orientation n'est pas limitée aux périphériques mobiles. Il est basé sur la largeur et la hauteur de la fenêtre d'affichage (pas la fenêtre ou les périphériques).

Le mode Paysage est utilisé lorsque la largeur de la fenêtre d'affichage est supérieure à la hauteur de la fenêtre d'affichage.

Le mode Portrait est utilisé lorsque la hauteur de la fenêtre d'affichage est supérieure à la largeur de la fenêtre d'affichage.

Cela se traduit généralement par un moniteur de bureau en mode paysage, mais peut-il parfois être portrait.

Dans la plupart des cas, les appareils mobiles signaleront leur résolution et non leur taille réelle en pixels, qui peut différer en raison de la densité des pixels. Pour les forcer à déclarer leur taille réelle de pixels ajouter les éléments suivants dans votre head tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Exemple de base

@media screen and (min-width: 720px) {
    body {
        background-color: skyblue;
    }
}

La requête multimédia ci-dessus spécifie deux conditions:

  1. La page doit être visualisée sur un écran normal (pas une page imprimée, un projecteur, etc.).
  2. La largeur du port d'affichage de l'utilisateur doit être d'au moins 720 pixels.

Si ces conditions sont remplies, les styles à l'intérieur de la requête multimédia seront actifs et la couleur d'arrière-plan de la page sera bleu ciel.

Les requêtes multimédias sont appliquées dynamiquement. Si, lors du chargement de la page, les conditions spécifiées dans la requête de média sont remplies, le CSS sera appliqué, mais sera immédiatement désactivé si les conditions ne sont plus remplies. À l'inverse, si les conditions ne sont pas remplies initialement, le CSS ne sera pas appliqué tant que les conditions spécifiées ne sont pas remplies.

Dans notre exemple, si la largeur du port d'affichage de l'utilisateur est initialement supérieure à 720 pixels, mais que l'utilisateur réduit la largeur du navigateur, la couleur d'arrière-plan cessera d'être bleu ciel dès que l'utilisateur aura redimensionné le port d'affichage à moins de 720 pixels. largeur. 

<link rel="stylesheet" media="min-width: 600px" href="example.css" />

Cette feuille de style est toujours téléchargée, mais elle est appliquée uniquement aux périphériques dont la largeur d'écran est supérieure à 600 pixels.

type de support

Les requêtes de média ont un paramètre optionnel mediatype . Ce paramètre est placé directement après la @media déclaration ( @media mediatype ), par exemple: 

@media print {
    html {
        background-color: white;
    }
}

Le code CSS ci-dessus donnera à l'élément HTML DOM une couleur de fond blanche lors de l'impression.

Le paramètre mediatype a un préfixe facultatif not ou only qui appliquera les styles à tout sauf le type de média spécifié ou uniquement le type de média spécifié. Par exemple, l'exemple de code suivant appliquera le style à chaque type de support, à l'exception de l' print . 

@media not print {
    html {
        background-color: green;
    }
}

Et de la même manière, pour le montrer uniquement à l'écran, cela peut être utilisé: 

@media only screen {
    .fadeInEffects {
        display: block;
    }
}

La liste de mediatype peut être mieux comprise avec le tableau suivant:

Type de support La description
all Appliquer à tous les appareils
screen Ordinateurs par défaut
print Imprimantes en général. Utilisé pour mettre en forme les versions imprimées des sites Web
handheld PDA, téléphones portables et appareils portables avec un petit écran
projection Pour une présentation projetée, par exemple des projecteurs
aural Systèmes de parole
braille Appareils tactiles en braille
embossed Imprimantes braille paginées
tv Appareils de type télévision
tty Dispositifs avec une grille de caractères à pas fixe. Terminaux, portables.

Utilisation de requêtes multimédia pour cibler différentes tailles d'écran

Souvent, la conception Web réactive implique des requêtes média, qui sont des blocs CSS exécutés uniquement si une condition est remplie. Ceci est utile pour la conception Web réactive car vous pouvez utiliser des requêtes multimédia pour spécifier différents styles CSS pour la version mobile de votre site Web par rapport à la version de bureau. 

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .site-title {
        font-size: 80%;
    }

    /* Styles in this block are only applied if the screen size is atleast 300px wide, but no more than 767px */
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 90%;
    }

    /* Styles in this block are only applied if the screen size is atleast 768px wide, but no more than 1023px */
}

@media only screen and (min-width: 1024px) {
    .site-title {
        font-size: 120%;
    }

    /* Styles in this block are only applied if the screen size is over 1024px wide. */
}

Largeur vs Viewport

Lorsque nous utilisons "width" avec des requêtes multimédias, il est important de définir correctement la balise meta. La balise META de base ressemble à ceci et doit être placée dans la <head> . 

<meta name="viewport" content="width=device-width,initial-scale=1">

Pourquoi c'est important?

Basé sur la définition de MDN, "width" est

La fonctionnalité de support de largeur décrit la largeur de la surface de rendu du périphérique de sortie (telle que la largeur de la fenêtre du document ou la largeur du bloc de page sur une imprimante).

Qu'est-ce que ça veut dire?

View-port est la largeur de l'appareil lui-même. Si votre résolution d'écran indique que la résolution est de 1280 x 720, la largeur de votre port d'affichage est "1280px".

Plus souvent, de nombreux appareils allouent une quantité de pixels différente pour afficher un pixel. Par exemple, l'iPhone 6 Plus a une résolution de 1242 x 2208. Mais la largeur et la hauteur de la fenêtre d'affichage sont de 414 x 736. Cela signifie que 3 pixels sont utilisés pour créer 1 pixel.

Mais si vous n'avez pas défini la balise meta correctement, elle essaiera d'afficher votre page Web avec sa résolution native, ce qui se traduira par un zoom arrière (textes et images plus petits).

Requêtes multimédias pour les écrans de rétine et non rétine

Bien que cela ne fonctionne que pour les navigateurs WebKit, ceci est utile: 

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1200px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

Informations d'arrière-plan

Il y a deux types de pixels dans l'affichage. L'un est les pixels logiques et l'autre les pixels physiques. La plupart du temps, les pixels physiques restent les mêmes, car il en va de même pour tous les périphériques d'affichage. Les pixels logiques changent en fonction de la résolution des périphériques pour afficher des pixels de meilleure qualité. Le ratio de pixels de l'appareil est le rapport entre les pixels physiques et les pixels logiques. Par exemple, le MacBook Pro Retina, l'iPhone 4 et les versions ultérieures indiquent un rapport de pixels de périphérique de 2, car la résolution linéaire physique est le double de la résolution logique.

La raison pour laquelle cela fonctionne uniquement avec les navigateurs WebKit est due à:

  • Le préfixe du fournisseur -webkit- avant la règle.
  • Cela n'a pas été implémenté dans les moteurs autres que WebKit et Blink.

Terminologie et Structure

Requêtes médias permettent d'appliquer des règles CSS en fonction du type de périphérique / support (p.ex. écran, impression ou portable) appelé type de média, d' autres aspects du dispositif sont décrits avec des fonctionnalités de médias tels que la disponibilité des dimensions de couleur ou de fenêtre.

Structure générale d'une requête média 

@media [...] {
    /* One or more CSS rules to apply when the query is satisfied */
}

Une requête multimédia contenant un type de média 

@media print {
    /* One or more CSS rules to apply when the query is satisfied */
}

Une requête de média contenant un type de média et une fonctionnalité de média 

@media screen and (max-width: 600px) {
    /* One or more CSS rules to apply when the query is satisfied */
}

Une requête de média contenant une fonctionnalité de média (et un type de média implicite de "tous") 

@media (orientation: portrait) {        
    /* One or more CSS rules to apply when the query is satisfied */
}

Requêtes médiatiques et IE8

Les requêtes multimédias ne sont pas prises en charge dans IE8 et les versions ultérieures.

Une solution de contournement basée sur Javascript

Pour ajouter un support pour IE8, vous pouvez utiliser l'une des solutions JS. Par exemple, Respond peut être ajouté pour ajouter le support de requête de média pour IE8 uniquement avec le code suivant: 

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries est une autre bibliothèque qui fait la même chose. Le code pour ajouter cette bibliothèque à votre code HTML serait identique: 

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

L'alternative

Si vous n'aimez pas une solution basée sur JS, vous devriez également envisager d'ajouter une feuille de style IE <9 uniquement, dans laquelle vous ajusterez votre style spécifique à IE <9. Pour cela, vous devez ajouter le code HTML suivant à votre code: 

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ielt9.css"/>
<![endif]-->

Remarque :

Techniquement, c'est une alternative: utiliser les hacks CSS pour cibler IE <9. Il a le même impact qu'une feuille de style IE <9 uniquement, mais vous n'avez pas besoin d'une feuille de style séparée pour cela. Je ne recommande pas cette option, car ils produisent du code CSS invalide (ce qui n'est que l'une des nombreuses raisons pour lesquelles l'utilisation des hacks CSS est généralement mal vue aujourd'hui).



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow