English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
El atributo 'link media' especifica para qué tipo de medio está destinado el recurso objetivo/Los dispositivos se optimizaron, y este atributo se utiliza generalmente junto con las hojas de estilo CSS para especificar diferentes estilos para diferentes tipos de medios.
Tiene dos hojas de estilo diferentes para dos tipos de medios diferentes (pantalla y impresión):
!DOCTYPE html> <html> <head> <meta charset="utf-8> <title>Uso del atributo 'link' hreflang en HTML-Tutoriales básicos(oldtoolbag.com)<//title> <link rel="stylesheet" type="text/css" href="demo_screen.css"> <link rel="stylesheet" type="text/css" href="demo_print.css" media="print"> </head> <body> <h1>oldtoolbag.com Ejemplo</h1> <p><a href="tryhtml_link_media.html" target="_blank">Haga clic aquí</abrir esta página en una ventana nueva (sin sección 'tryit').</p> <p>Si imprime esta página o la abre en la vista previa de impresión, verá que utiliza la hoja de estilo 'media="print"' para la configuración de estilos. La hoja de estilo 'imprimir' contiene texto negro sobre fondo blanco.</p> </body> </html>Prueba aquí ‹/›
IEFirefoxOperaChromeSafari
Todos los navegadores principales admiten la propiedad media.
La propiedad media especifica qué tipo de medio es el recurso objetivo/Optimizado para dispositivos
Este atributo se utiliza generalmente con hojas de estilo CSS para especificar estilos diferentes para diferentes tipos de medios.
La propiedad media puede aceptar múltiples valores.
La propiedad media ahora admite más valores.
<link media="value>
| Valor | Descripción |
|---|---|
| and | Define un operador AND. |
| not | Define un operador NOT. |
| , | Define un operador OR. |
| Valor | Descripción |
|---|---|
| all | Predeterminado. Aplicable a todos los dispositivos. |
| aural | Sintetizador de voz. |
| braille | Dispositivo de retroalimentación en braille. |
| handheld | Dispositivos portátiles (pantalla pequeña, ancho de banda limitado). |
| projection | Proyector. |
| Modo de vista previa de impresión/Página de impresión. | |
| screen | Pantalla de computadora. |
| tty | Máquinas telegráficas y otros medios que utilizan una cuadrícula de caracteres de ancho uniforme. |
| tv | Dispositivos de tipo televisor (baja resolución, capacidad de desplazamiento limitada). |
| Valor | Descripción |
|---|---|
| width | Define el ancho de la región de visualización objetivo Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (min-width:500px)" |
| height | Define la altura de la región de visualización objetivo Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (max-height:700px)" |
| device-width | Define el monitor objetivo/ancho del papel Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (device-width:500px)" |
| device-height | Define el monitor objetivo/altura del papel Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (device-height:500px)" |
| orientation | Define el monitor objetivo/Dirección del papel Valores posibles: "portrait" o "landscape"。 Ejemplo: media="all and (orientation: landscape)" |
| aspect-ratio | Define el ancho de la región de visualización objetivo/proporción de altura. Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Define el monitor objetivo/device del papel-width/device-ratio de altura. Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (aspect-ratio:16/9)" |
| color | Define los bits de la pantalla objetivo/color。 Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (color:3)" |
| color-index | Define la cantidad de colores que puede manejar el monitor objetivo. Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (min-color-index:256)" |
| monochrome | Define los bits en el búfer de color monocromático/pixel. Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="screen and (monochrome:2)" |
| resolution | Define el monitor objetivo/La densidad de píxeles del papel (dpi o dpcm). Se puede usar "min-" y "max-" es el prefijo. Ejemplo: media="print and (resolution:300dpi)" |
| scan | Define el modo de escaneo del monitor tv. Valores posibles: "progressive" y "interlace". Ejemplo: media="tv and (scan:interlace)" |
| grid | Define si el dispositivo de salida es una rejilla o bitmap. Valores posibles:"1" es para la rejilla, de lo contrario es "0". Ejemplo: media="handheld and (grid:1)" |