CSS @media 规则

Questa regola @media può essere utilizzata per definire regole di stile per diversi tipi di media in un singolo foglio di stile. Deve essere seguita da una lista di tipi di media elencati con virgola e un blocco contenente le regole.

Con la regola @media, puoi definire stili diversi per diversi tipi di media.

L'attributo @media può impostare stili diversi per diverse dimensioni dello schermo, in particolare se devi impostare una pagina responsive, @media è molto utile.

Quando riduci la dimensione del browser, la pagina viene ridisegnata in base alla larghezza e altezza del browser.

Sintassi del rule @media in CSS

La sintassi di questa regola è la seguente:

@media media type,... {
　　　　/* regole specifiche per il media */
}

Puoi anche utilizzare stili CSS diversi per diversi media:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

Il seguente esempio dimostra come utilizzare l'attributo @media.

@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;
}
}

Tipo di media

Funzione di media

Compatibilità del browser

Compatibilità dei browser con l'attributo @media, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutte le principali browser supportano questa regola.

Leggi di più

Si prega di consultare la seguente guida:Tipi di Media del CSS。