Consultas de medios CSS
Tipos de medios introducidos en CSS2
La @mediaregla, introducida en CSS2, hizo posible definir diferentes reglas de estilo para diferentes tipos de medios.
Ejemplos: puede 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 introdujo consultas de medios
Las consultas de medios 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 consultas de medios 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 consultas de medios 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 navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la @mediaregla.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Sintaxis de consulta de medios
Una consulta de medios 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 de la consulta 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 de la consulta de medios son verdaderas. Cuando una consulta de medios es verdadera, se aplican la hoja 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
alltipo estará implícito.
También puede tener diferentes hojas de estilo para diferentes medios:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Tipos de medios CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Consultas de medios Ejemplos simples
Una forma de usar consultas de medios es tener una sección CSS alternativa dentro de su hoja de estilo.
El siguiente ejemplo cambia el color de fondo a verde claro 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 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 consultas de medios
Para obtener muchos más ejemplos de consultas de medios, vaya a la página siguiente: Ejemplos de CSS MQ .
CSS @referencia de medios
Para obtener una descripción general completa de todos los tipos de medios y funciones/expresiones, consulte la regla @media en nuestra referencia de CSS .