Regla @media CSS

La regla @media se puede usar para definir reglas de estilo para varios tipos de medios en una única hoja de estilos. Debe seguirse inmediatamente por una lista de tipos de medios separados por comas y un bloque que contiene las reglas.

Con la regla @media, puedes definir estilos diferentes para diferentes tipos de medios.

@media puede establecer diferentes estilos para diferentes tamaños de pantalla, especialmente si necesitas configurar una página responsive, @media es muy útil.

Cuando ajustas el tamaño del navegador, la página también se renderiza de nuevo según el ancho y la altura del navegador.

Sintaxis del uso de la regla @media en CSS

La sintaxis de esta regla es la siguiente:

@media　media　type,...　{
　　　　/*　medio-reglas específicas　*/
}

También puedes usar diferentes estilos CSS para diferentes medios:

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

El siguiente ejemplo muestra cómo usar la propiedad @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 de medio

Función de medio

Compatibilidad del navegador

Compatibilidad del atributo @media del navegador, los números en la tabla a continuación representan la versión mínima del navegador que admite la propiedad; todos los navegadores principales admiten esta regla.

Leer más

Consulte las siguientes instrucciones:Tipos de medios CSS.