CSS @media (Media)

I tipi di media CSS ti permettono di formattare il documento in modo che venga visualizzato correttamente su vari tipi di media (ad esempio, schermo, stampa, browser audio, ecc.).

Introduzione ai tipi di media

CSS @media (media) è una delle funzionalità più importanti dello stile, e puoi specificare uno stile di foglio di stile diverso per diversi tipi di media. Questo è uno dei modi migliori per costruire pagine web amichevoli per la stampa - assegna semplicemente uno stile di foglio di stile diverso per il tipo di media "stampa".

Alcuni attributi CSS sono applicabili solo a certi media. Ad esempio, ilpage-break-afterLa proprietà è applicabile solo ai supporti di paginazione. Tuttavia, ci sono alcune proprietà che possono essere condivise tra diversi tipi di media, ma potrebbe essere necessario utilizzare valori diversi per questa proprietà.font-sizeAd esempio, questa proprietà può essere utilizzata per schermi e supporti di stampa, ma potrebbe avere valori diversi.

In confronto con una migliore leggibilità, i documenti di solito necessitano di caratteri più grandi sui monitor rispetto alla stampa, e i caratteri sans-serif sono considerati più facili da leggere sugli schermi, mentre i caratteri serif sono molto popolari nella stampa. Pertanto, è necessario specificare che il foglio di stile o un insieme di regole di stile è applicabile a determinati tipi di media.

Creare fogli di stile dipendenti dal tipo di media

Di solito si utilizzano tre metodi per specificare la dipendenza del foglio di stile dal tipo di media:

Metodo 1: Utilizzando regola @media

La regola @media viene utilizzata per definire regole di stile diverse per diversi tipi di media in un singolo foglio di stile. Di solito, è seguita da una lista di tipi di media separati da virgola e un blocco di dichiarazioni CSS che contengono le regole di stile per il medium di destinazione.

Le dichiarazioni di stile nell'esempio seguente informano il browser di visualizzare il contenuto del corpo in Arial di 14 pixel sulla schermata, ma con Timespoint di 12 punti durante la stampa. Tuttavialine-heighte i valori delle due proprietà sono entrambi impostati su 1.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;
　　　　}
}

Metodo 2: Utilizzando regola @import

Questa regola @import è un altro metodo per impostare le informazioni di stile per un medium di destinazione specifico - è sufficiente specificare il tipo di media separato da virgola dopo l'URL del foglio di stile importato.

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

La dichiarazione di tipo di media print all'interno della stampa @import indica al browser di caricare il foglio di stile esterno (print.css) e di applicare lo stile solo ai media di stampa.

Metodo 3: Utilizzando Elemento <link>

L'elemento utilizzato per specificare il medium di destinazione come foglio di stile esterno nel documento HTML è il属性的元素。

<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">

In questo esempio, l'attributo media indica al browser di caricare la tabella di stili esterna "screen.css" e applicare i suoi stili solo allo schermo, mentre "print.css" viene utilizzato per la stampa.

Diversi tipi di media

La tabella sottostante elenca i vari tipi di media utilizzabili per posizionare diversi tipi di dispositivi (ad esempio stampanti, dispositivi handheld, schermi di computer, ecc.).

Tipo di media