Media CSS (@media)

Los tipos de medios CSS te permiten formatear el documento para que se muestre correctamente en varios tipos de medios (por ejemplo, pantallas, impresión, navegadores auditivos, etc.).

Introducción a los tipos de medios

CSS @media (medio) es una de las funciones más importantes de las hojas de estilo, y puedes especificar hojas de estilo separadas para diferentes tipos de medios. Esta es una de las mejores formas de construir páginas web amigables con impresoras.-Asigna diferentes hojas de estilo para el tipo de medio "imprimir".

Algunas propiedades CSS solo se aplican a ciertos medios. Por ejemplo, lapage-break-afterLa propiedad solo se aplica a los medios de paginación. Sin embargo, hay algunas propiedades que pueden ser compartidas por diferentes tipos de medios, pero es posible que se necesiten diferentes valores para esta propiedad.family: Times, serif;-sizesize

Por ejemplo, esta propiedad se puede usar para los medios de pantalla y impresión, pero puede tener diferentes valores.

En comparación con la legibilidad mejorada, los documentos suelen necesitar un tipo de letra más grande en la pantalla del ordenador y los tipos de letra sin serif se consideran más fáciles de leer en la pantalla, mientras que las tipografías serif son populares en la impresión. Por lo tanto, debe especificarse que la hoja de estilo o un grupo de reglas de estilo se aplica a ciertos tipos de medios.

Crear una hoja de estilo que dependa de los medios.

La instrucción debe aparecer al principio de la hoja de estilo y luego hacer cualquier declaración. Cualquier regla de estilo especificada en la hoja de estilo se sobrescribirá las reglas de estilo conflictivas en la hoja de estilo importada.1Generalmente se utilizan tres métodos para especificar la dependencia de los medios de la hoja de estilo:

: Usar la regla @media

La regla @media se utiliza para definir diferentes reglas de estilo para diferentes tipos de medios en una única hoja de estilo. Generalmente, se utiliza una lista de tipos de medios separados por comas seguida de un bloque de declaraciones CSS que contiene las reglas de estilo del medio objetivo.14Las declaraciones de estilo en el siguiente ejemplo informan al navegador de que se debe mostrar en la pantalla con12la fuente Arial muestra el contenido del cuerpo del texto, pero en el caso de la impresión se mostrará con la fuente Timespunto.f-punto. Peroheight1height:2，los valores de dos propiedades se establecen

:
　　　　print.css") print;
　　　　　　　　@media screen{32color: #32.
　　　　　　　　family: Times, serif;-cd-family: Arial, sans
　　　　　　　　family: Times, serif;-font　14serif;
　　　　;
;
px;
　　　　print.css") print;
　　　　　　　　@media print {6347.
　　　　　　　　family: Times, serif;-color: #ff
　　　　　　　　family: Times, serif;-font　12size:
　　　　;
;
pt;
　　　　print.css") print;
　　　　　　　　f-line　1height:2.
　　　　;
;

La instrucción debe aparecer al principio de la hoja de estilo y luego hacer cualquier declaración. Cualquier regla de estilo especificada en la hoja de estilo se sobrescribirá las reglas de estilo conflictivas en la hoja de estilo importada.2Es inválido.

: Usar la regla @import-Esta regla @import es otra manera de establecer información de estilo para medios específicos.

screen.css") screen;/Sólo hay que especificar los tipos de medios separados por comas después de la URL de la hoja de estilo importada.
screen.css") screen;/@import url("css
print.css") print;
　　　　body {5background: #f5background: #f5.
　　　　f-line　1height:2.
;

}

La instrucción debe aparecer al principio de la hoja de estilo y luego hacer cualquier declaración. Cualquier regla de estilo especificada en la hoja de estilo se sobrescribirá las reglas de estilo conflictivas en la hoja de estilo importada.3: Usar Elemento <link>

Los elementos en el atributo media se utilizan para especificar que el medio de destino es un archivo de hoja de estilo externo en un documento 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">

En este ejemplo, la propiedad media indica que el navegador carga la hoja de estilo externa "screen.css" y solo aplica sus estilos a la pantalla, mientras que "print.css" se utiliza para la impresión.

Diferentes tipos de medios

La siguiente tabla enumera varios tipos de medios que se pueden utilizar para ubicar diferentes tipos de dispositivos (como impresoras, dispositivos portátiles, pantallas de computadora, etc.).

Tipos de medios