La regla @media, introducida en CSS2, hizo posible definir diferentes reglas de estilo para diferentes tipos de medios.
Ejemplos: podría tener un conjunto de reglas de estilo para pantallas de computadora, otro para impresoras, uno para dispositivos portátiles, otro para dispositivos tipo televisión, etc.
Desafortunadamente, estos tipos de medios nunca obtuvieron mucho soporte por parte de los dispositivos, otros que el tipo de medio impreso.
Las consultas de medios en CSS3 ampliaron la idea de tipos de medios de CSS2: en lugar de buscar un tipo de dispositivo, Se fijan en la capacidad del dispositivo.
Las consultas de medios se pueden utilizar para comprobar muchas cosas, como por ejemplo:
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 ofrecer un estilo personalizado. Sheet a computadoras de escritorio, portátiles, tabletas y teléfonos móviles (como teléfonos iPhone y Android).
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la regla @media.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Una consulta de medios consta de un tipo de medio y puede contener uno 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 Es verdadero si el tipo de medio especificado coincide con el tipo de dispositivo en el que se encuentra el documento. se muestra y todas las expresiones en la consulta de medios son verdaderas. Cuando una consulta de medios es verdadera, la hoja de estilo o las reglas de estilo correspondientes son aplicado, siguiendo las reglas normales en cascada.
A menos que utilice los operadores not o only, el tipo de medio es opcional y el Se implicará el tipo todos.
También puedes tener diferentes hojas de estilo para diferentes medios:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">Utilizado para todos los dispositivos de tipo multimedia.
Utilizado para impresoras
Utilizado para pantallas de computadora, tabletas, teléfonos inteligentes, etc.
Se utiliza para lectores de pantalla que "lee" la página en voz alta.
Una forma de utilizar consultas de medios 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 el 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):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
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):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
Para obtener muchos más ejemplos sobre consultas de medios, vaya a la página siguiente: Ejemplos de CSS MQ.
Para obtener una descripción completa de todos los tipos de medios y características/expresiones, consulte la Regla @media en nuestra referencia CSS.