Las consultas de medios en CSS se utilizan para aplicar estilos a diferentes dispositivos basados en características como la resolución de pantalla, la orientación y otros factores similares. Esta es una característica importante de los diseños web responsivos.
Aquí está cómo puedes usar las consultas de medios en CSS:
`@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}`
El código anterior aplica un color de fondo azul claro al cuerpo de la página si la pantalla del dispositivo tiene 600 píxeles de ancho o menos.
Veamos otra ejemplo:
```css
@media (min-width: 600px) and (max-width: 800px) {
p {
color: red;
}
}
```
En este caso, el párrafo se coloreará en rojo si la pantalla del dispositivo mide entre 600px y 800px de ancho.
Aquí está una lista de algunas expresiones comunes que puedes usar en las consultas de medios en CSS:
```
- min-width y max-width: se utilizan para aplicar estilos en dispositivos que tienen un ancho de pantalla dentro de un cierto rango.
- min-height y max-height: se utilizan para aplicar estilos en dispositivos que tienen una altura de pantalla dentro de un cierto rango.
- orientation: se utiliza para aplicar estilos en dispositivos basados en su orientación (paisaje o retrato).
- resolution: se utiliza para aplicar estilos en dispositivos que tienen una resolución específica.
```
Recuerda que puedes combinar varias consultas de medios usando “and” para aplicar estilos más específicos.
