Una de las características más importantes de las hojas de estilos CSS es que permiten definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras, móviles, proyectores, etc.
Además, CSS define algunas propiedades específicamente para determinados medios, como por ejemplo la paginación y los saltos de página para los medios impresos o el volumen y tipo de voz para los medios de audio.
| Medio | Descripción |
|---|---|
| all | Todos los medios definidos |
| braille | Dispositivos táctiles que emplean el sistema braille |
| embosed | Impresoras braille |
| handheld | Dispositivos de mano: móviles, PDA, etc |
| Impresoras y navegadores en el modo “Vista previa para imprimir” | |
| projection | Proyectores y dispositivos para presentaciones |
| screen | Pantallas de computadoras |
| speech | Sintetizadores para navegadores de voz utilizados por personas discapacitadas |
| tty | Dispositivos textuales limitados como teletipos y terminales de texto |
| tv | Televisores y dispositivos con resolución baja |
Ejemplos de media aplicado en un mismo CSS
|
1 2 3 4 5 6 7 8 9 |
@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } } |
Media también utiliza características para determinar las medidas de la pantalla
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* esto funcionará si la resolución de pantalla está entre 300 y 800 pixeles de ancho */ @media (max-width: 800px) and (min-width: 300px) { ....... caracteristicas ....... } /* esto funcionará si la resolución mínima de la pantalla es de 1200 pixeles de ancho */ @media (min-width: 1200px) { ....... caracteristicas ....... } /* esto funcionará si la resolución mínima de la pantalla es de 1600 pixeles de ancho */ @media (min-width: 1600px) { ....... caracteristicas ....... } |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
