Media CSS (@media)

Les types de médias CSS vous permettent de formatter un document de sorte qu'il s'affiche correctement sur divers types de médias (par exemple, écrans, impressions, navigateurs auditifs, etc.).

Introduction aux types de médias

CSS @media (média) est l'une des fonctionnalités les plus importantes des feuilles de style, où vous pouvez spécifier des feuilles de style distinctes pour différents types de médias. C'est l'une des meilleures méthodes pour construire des pages Web amicales aux imprimantes-Il suffit d'affecter une feuille de style différente pour le type de média "imprimer".

Certaines propriétés CSS ne s'appliquent qu'à certains médias. Par exemple, lapage-break-afterLes propriétés ne s'appliquent qu'aux médias paginés. Cependant, certaines propriétés peuvent être partagées par différents types de médias, mais peuvent nécessiter l'utilisation de valeurs différentes pour cette propriété.font-sizePar exemple, cette propriété peut être utilisée pour les médias d'écran et d'impression, mais peut avoir différentes valeurs.

Compared to better readability, documents usually need larger fonts on computer screens than on computer screens, and sans-serif fonts are also considered easier to read on screens, while serif fonts are popular in printing. Therefore, it is necessary to specify that the stylesheet or a set of style rules is applicable to certain media types.

Créer une feuille de style dépendante des médias

Il existe généralement trois méthodes pour spécifier la dépendance des médias de la feuille de style :

La méthode1: Utilisation de la règle @media

La règle @media est utilisée pour définir des règles de style différentes pour différents types de médias dans une seule feuille de style. Habituellement, elle est suivie d'une liste de types de média séparés par des virgules et d'un bloc de déclarations CSS contenant les règles de style pour le média cible.

Les déclarations de style dans l'exemple suivant indiquent au navigateur d'afficher sur l'écran14Arial police d'écriture affiche le contenu du texte, mais sous forme de Timespoint police d'écriture lors de l'impression12point. Maisline-heightLes valeurs des deux attributs sont définies sur1.2:

@media screen{
　　　　body {
　　　　　　　　color: #32cd32;
　　　　　　　　font-family: Arial, sans-serif;
　　　　　　　　font-size:　14px;
　　　　}
}
@media print {
　　　　body {
　　　　　　　　color: #ff6347;
　　　　　　　　font-family: Times, serif;
　　　　　　　　font-size:　12pt;
　　　　}
}
@media screen, print {
　　　　body {
　　　　　　　　line-height:　1.2;
　　　　}
}

La méthode2: Utilisation de la règle @import

Cette règle @import est une autre méthode pour définir des informations de style pour des médias spécifiques.-Il suffit de spécifier les types de média après l'URL de la feuille de style importée, séparés par des virgules.

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
　　　　background: #f5f5f5;
　　　　line-height:　1.2;
}

La déclaration de type de média print dans la commande @import indique au navigateur de charger la feuille de style externe (print.css) et d'appliquer ses styles uniquement aux médias d'impression.

La méthode3: Utilisation L'élément <link>

Les éléments sur l'attribut media sont utilisés pour spécifier que le média cible est un feuille de style externe dans un document HTML.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

Dans cet exemple, l'attribut media indique au navigateur de charger la feuille de style externe "screen.css" et d'appliquer ses styles uniquement aux écrans, tandis que "print.css" est utilisé pour l'impression.

Différents types de médias

Le tableau suivant liste divers types de médias disponibles pour localiser différents types d'appareils (par exemple, imprimantes, appareils portables, écrans d'ordinateur, etc.).

Type de média