link.media | Html

Descripción

El atributo media del elemento link es utilizado para especificar en qué tipo de medio se va a mostrar la hoja de estilo vinculada. Permite cargar diferentes hojas de estilo según el tipo de dispositivo o medio de visualización como pantallas, impresoras, dispositivos de voz, etc.

El valor que se le asigna es el de una media-query. Los valores que puede tener una media-query son:

all: Para todos los dispositivos
print: Para dispositivos de impresión
screen: Para pantallas de ordenador, tablets, smartphones, etc.
speech: Para lectores de pantalla y dispositivos de síntesis de voz
max-width, min-width, max-height, min-height: Para especificar dimensiones del dispositivo
orientation: Para especificar si el dispositivo está en modo portrait o landscape

Sintaxis

<link media="media-query">

Elemento Padre

link

Ejemplo

A continuación se muestra un ejemplo de cómo utilizar el atributo media en un elemento link para cargar diferentes hojas de estilo según el tipo de dispositivo:

<!-- Hoja de estilo para todas las pantallas --&gt;
<link rel="stylesheet" href="estilo-general.css" media="all">

<!-- Hoja de estilo solo para impresión -->
<link rel="stylesheet" href="estilo-impresion.css" media="print">

<!-- Hoja de estilo para dispositivos móviles -->
<link rel="stylesheet" href="estilo-movil.css" media="screen and (max-width: 768px)">

<!-- Hoja de estilo para orientación horizontal en tablets -->
<link rel="stylesheet" href="estilo-tablet.css" media="screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)">

Artículos

Manual HTML

Aprende más sobre HTML consultando online o descargando nuestro manual.

Test HTML

¿Te atreves a probar tus habilidades y conocimiento en HTML con nuestro test?

Vídeos HTML

Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.