Combinación de varias media queries
Utilice los operadores and, or y not para combinar media features en consultas complejas.
Combinación de varias media queries es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
El operador and
La palabra clave and exige que todas las condiciones sean verdaderas simultáneamente. Es útil para seleccionar conjuntamente tamaños y tipos de dispositivos específicos.
<div class="box">and operator demo</div>
Rangos con and
Combinar min-width y max-width con and permite dirigirse a un rango específico de anchuras del viewport (estilos solo para tabletas):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
La coma como OR
Las consultas separadas por comas funcionan como OR: los estilos se aplican si CUALQUIER consulta coincide:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
El operador not
not niega una consulta de medios completa. Debe utilizarlo con cuidado: se aplica a toda la expresión de la consulta, no solo a la primera condición.
<div class="doc">not operator demo</div>
not con paréntesis (moderno)
Las consultas de medios modernas de nivel 4 permiten utilizar not() como función en características individuales:
<div class="panel">not() function demo</div>
Palabra clave only (heredada)
La palabra clave only se utilizaba para ocultar las consultas de medios de los navegadores antiguos que no admitían características de medios. Los navegadores modernos la ignoran, pero no causa ningún problema.
<div class="box">only keyword demo</div>
Anidamiento de consultas de medios (CSS Nesting)
Con el anidamiento nativo de CSS, las consultas de medios pueden escribirse dentro de bloques de selectores:
<div class="card">Nested media query demo</div>
Combinación de móvil + alta densidad de píxeles
Diríjase específicamente a dispositivos móviles (pequeños y con alta densidad de píxeles):
<div class="icon"></div>
Impresión + color
Múltiples características de medios para estilos de impresión que solo se aplican a impresoras a color:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Consulta de medios en @import
Las consultas de medios pueden aplicarse al importar para cargar hojas de estilo completas de forma condicional (aunque esto bloquea la representación y debe utilizarse con moderación):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Propiedades lógicas en consultas complejas
Como regla general, las consultas más sencillas son más fáciles de mantener. Evite encadenar demasiadas condiciones. Cuando una consulta se vuelva compleja, considere reestructurar el enfoque de CSS en lugar de complicar la consulta.
Comprobación rápida
¿Qué consulta de medios aplica estilos cuando el viewport tiene al menos 600px de ancho O el dispositivo está en orientación horizontal?
Repaso
and requiere que todas las condiciones sean verdaderas. Las comas funcionan como OR entre consultas. not niega una consulta completa. Combine min-width y max-width para dirigirse a rangos. El CSS moderno admite el anidamiento de consultas de medios dentro de bloques de selectores y la sintaxis de rangos para expresiones más claras.
Preguntas frecuentes
¿La lección «Combinación de varias media queries» es gratis?
Sí — el texto completo de «Combinación de varias media queries» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Combinación de varias media queries»?
Utilice los operadores and, or y not para combinar media features en consultas complejas. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Combinación de varias media queries»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sintaxis y puntos de ruptura habituales
- Consultas de ancho, alto y orientación
- Prefers-Color-Scheme y Prefers-Reduced-Motion
- Combinación de varias media queries