Consultas de medios en CSS

Las consultas de medios son una técnica de CSS que le permite definir diferentes estilos para diferentes dispositivos y tamaños de pantalla. Con las consultas de medios, puede crear un sitio web receptivo que se adapte automáticamente a diferentes dispositivos, como teléfonos inteligentes, tabletas y computadoras de escritorio.

Las consultas de medios funcionan agregando una condición que verifica el tamaño de la pantalla o el tipo de dispositivo y luego aplicando diferentes estilos basados ​​en esa condición. Puede usar consultas de medios para cambiar el ancho del contenido, el tamaño del texto, el color de fondo y mucho más.

Hay varias formas de escribir una consulta de medios CSS, pero la más común es usar la palabra clave "medios" seguida de una condición. Vea un ejemplo:

@media(ancho mínimo: 768px) { /* Estilos para pantallas mayores a 768px */ }

En este ejemplo, la condición es "min-width: 768px", lo que significa que los estilos dentro de la consulta de medios se aplicarán a pantallas con un ancho mínimo de 768 píxeles. Puede usar otras condiciones, como "ancho máximo" para pantallas más pequeñas que un tamaño determinado u "orientación" para dispositivos en orientación vertical u horizontal.

Además, puede combinar múltiples condiciones para crear consultas de medios más complejas. Por ejemplo:

@media (ancho mínimo: 768 px) y (orientación: paisaje) { /* Estilos para pantallas de más de 768 px en orientación horizontal */ }

En este ejemplo, la condición es "ancho mínimo: 768 píxeles" y "orientación: paisaje", lo que significa que los estilos dentro de la consulta de medios se aplicarán a pantallas con un ancho mínimo de 768 píxeles y en orientación horizontal.

Las consultas de medios son una herramienta poderosa para crear sitios web receptivos que se adaptan a diferentes dispositivos. Con ellos, puede asegurarse de que su sitio sea fácil de usar y navegar, sin importar qué dispositivo use el usuario.

Ahora responde el ejercicio sobre el contenido:

_¿Cuál es el propósito de las consultas de medios en CSS?

¡Tienes razón! Felicitaciones, ahora pasa a la página siguiente.

¡Tú error! Inténtalo de nuevo.

Imagen del artículo preprocesadores css

Siguiente página del libro electrónico gratuito:

31preprocesadores css

1 minutos

¡Obtén tu certificado para este curso gratis! descargando la aplicación Cursa y leyendo el libro electrónico allí. ¡Disponible en Google Play o App Store!

Disponible en Google Play Disponible en App Store

+ 6,5 millones
estudiantes

Certificado gratuito y
válido con código QR

48 mil ejercicios
gratis

Calificación de 4.8/5
en tiendas de aplicaciones

Cursos gratuitos de
vídeo, audio y texto.