Cargando...

Media queries CSS

Diseño responsivo fijó la mentalidad: un árbol HTML, viewport meta, envoltorio fluido, unidades relativas. Las media queries son el interruptor — bloques de CSS que solo se activan cuando se cumple una condición (casi siempre el ancho del viewport). Esta lección enseña la sintaxis y hábitos calmados; Imágenes responsivas y Breakpoints profundizan el kit después.

Caja de herramientas de media queries

📊 Media queries de un vistazo

Pieza Trabajo diario
@media Abre un bloque CSS condicional
Característica de medio (min-width, max-width, …) La prueba que evalúa el navegador
and Exige que coincidan todas las características listadas
Consultas separadas por coma Lógica o — basta cualquier lista que coincida
Conjunto de reglas dentro de { } Estilos que aplican solo mientras la consulta coincide
Tipo de medio (screen, print) Filtro opcional del medio de salida

Sin consultas, cada regla está «siempre activa». Con ellas mantienes una base sólida (de la lección anterior) y apilas cambios — columnas más anchas, tipografía mayor, otra navegación — solo cuando el viewport puede soportarlos.

Anatomía de @media

Patrón clásico: característica entre paréntesis y luego un bloque de llaves con declaraciones normales. Usa rem o em para anchos cuando puedas — escalan mejor con la raíz/tipografía que listas duras de píxeles de dispositivo.

Media query básica con min-width

css 
.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

Mobile-first con min-width

Escribe el layout estrecho en la hoja base. Usa @media (min-width: …) para añadir mejoras al crecer el viewport. Cada paso debe cambiar una capa clara — espaciado, columnas o navegación — no reescribir toda la página en cada escalón.

Mejora mobile-first

css 
.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

Desktop-first con max-width

Si la base es un layout ancho, @media (max-width: …) aprieta estilos bajo un umbral — apilar columnas, reducir padding, simplificar chrome. Sé coherente en el proyecto: no saltes sin motivo entre pilas puras de min-width y max-width.

Ajuste desktop-first

css 
.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

Combinar características con and

Encadena características para que todas deban coincidir. Útil para rangos (min y max juntos) o para emparejar ancho con otra característica. Una coma entre listas completas de @media significa o.

Rango con and

css 
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

Más allá del ancho — impresión (y extras calmados)

El ancho es la herramienta cotidiana. Tipos como print ocultan chrome para papel. Las preferencias (por ejemplo prefers-reduced-motion) son pulido de accesibilidad — úsalas con mesura aquí; Breakpoints organiza la estrategia y Accesibilidad cubre el movimiento más adelante.

Estilos de impresión simples

css 
@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

Un hábito calmado de breakpoints

Elige una lista corta de anchos con nombre que encajen con tus puntos de tensión del layout — no con cada modelo de teléfono. Documéntalos (por ejemplo «la nav se pliega bajo 48rem»). Prefiere base fluida + pocas consultas a un bosque de reglas por dispositivo. Las siguientes lecciones cubren imágenes y un plan de breakpoints más completo.

Pruébalo tú

  1. Toma una nav apilada y añade un @media (min-width: …) que la pase a flex.
  2. Reescribe la misma idea con un apriete desktop-first con max-width — nota la diferencia en los estilos base.
  3. Añade una consulta de rango con min-width y max-width solo para una franja de dos columnas.
  4. Oculta un banner decorativo con @media print.
  5. Escribe tres breakpoints con nombre para tu página de práctica — mantén la lista corta.

Errores frecuentes

  • Una consulta aparte por cada marca de dispositivo en lugar de puntos de tensión del layout
  • Olvidar el } de cierre y que el CSS posterior desaparezca dentro de la consulta
  • Mezclar pilas de min-width y max-width al azar hasta que la cascada pelea consigo misma
  • Confiar solo en consultas e ignorar contenedores fluidos y unidades relativas de Diseño responsivo
  • Volcar aquí un catálogo largo de breakpoints — ese oficio sigue en Breakpoints; las imágenes en Imágenes responsivas

Resumen

  • Las media queries envuelven CSS para que solo aplique cuando coinciden las condiciones
  • min-width mejora hacia arriba (mobile-first); max-width aprieta hacia abajo (desktop-first)
  • and exige todas las características; las comas entre consultas actúan como o
  • Pocos breakpoints con nombre ligados a necesidades reales de layout
  • Siguiente: Imágenes responsivas — medios que escalan sin romper la columna

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
8
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 55 de 62
Css Tutorial