Tipos de medios en CSS2
La regla @media, introducida en CSS2, hizo posible definir diferentes reglas de estilo para diferentes tipos de medios.
Ejemplo: puedes tener un conjunto de reglas de estilo para pantallas de computadora, uno para impresoras, uno para dispositivos de mano, uno para dispositivos de tipo televisión, etc.
Desafortunadamente, estos tipos de medios nunca recibieron mucho apoyo de los dispositivos, aparte del tipo de medios impresos.
CSS3 Introduce media queries
Las media queries en CSS3 ampliaron la idea de los tipos de medios de CSS2: en lugar de buscar un tipo de dispositivo, analizan la capacidad del dispositivo.
Las media queries se pueden usar para verificar muchas cosas, como:
Ancho y alto de la ventana gráfica
Ancho y alto del dispositivo
Orientación (¿La tableta/teléfono está en modo horizontal o vertical?)
Resolución
El uso de media queries es una técnica popular para entregar una hoja de estilo personalizada a equipos de escritorio, portátiles, tabletas y teléfonos móviles (como teléfonos iPhone y Android).
Compatibilidad con el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la regla @media.
| Propiedad | Chrome | Edge | Mozilla | Safari | Opera |
@media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Sintaxis de los media queries
Una media query consta de un tipo de medio y puede contener una o más expresiones, que se resuelven en verdadero o falso.
@media not|only mediatype and (expressions) {
CSS-Code;
}
El resultado del media query es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se muestra el documento y todas las expresiones del media query son verdaderas. Cuando un media query es verdadera, se aplican las hojas de estilo o las reglas de estilo correspondientes, siguiendo las reglas en cascada normales.
A menos que utilice los operadores not o only, el tipo de medio es opcional y el tipo all estará implícito.
También puedes tener diferentes hojas de estilo para diferentes medios:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
Tipos de medios CSS3
| Valor | Descripción |
all | Se utiliza para todos los dispositivos de tipo de medios. |
print | Se utiliza para impresoras. |
screen | Se utiliza para pantallas de computadora, tabletas, teléfonos inteligentes, etc. |
speech | Se utiliza para lectores de pantalla que "leen" la página en voz alta. |
Ejemplos simples con media queries
Una forma de usar los media queries es tener una sección CSS alternativa dentro de su hoja de estilos.
El siguiente ejemplo cambia el color de fondo a verde claro si la ventana gráfica (viewport) tiene 480 píxeles de ancho o más (si la ventana gráfica tiene menos de 480 píxeles, el color de fondo será rosa):
Ejemplo:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
El siguiente ejemplo muestra un menú que flotará a la izquierda de la página si la ventana gráfica tiene 480 píxeles de ancho o más (si la ventana gráfica tiene menos de 480 píxeles, el menú estará encima del contenido):
Ejemplo:
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
Más ejemplos de media queries
Para ver más ejemplos de media queries, vaya a la siguiente página de este artículo.
Referencias
Para obtener una descripción general completa de todos los tipos de medios y funciones/expresiones, consulte la regla @media css.
Traducido con 💚 desde W3Schools.com