¿Qué es una media query?
Una media query aplica un bloque de CSS solo cuando se cumple una condición sobre el viewport (normalmente, su ancho). Es la herramienta que hace que el diseño cambie según el tamaño de pantalla.
@media (min-width: 768px) {
.galeria {
flex-direction: row; /* en pantallas >= 768px, en fila */
}
}
Lee literalmente: «a partir de 768 px de ancho, la galería va en fila». Por debajo de ese ancho, sigue valiendo el estilo base (la columna).
Breakpoints típicos
Un breakpoint es el ancho en el que el diseño cambia. No hay valores sagrados, pero estos son habituales:
@media (min-width: 640px) { /* móvil grande / tablet vertical */ }
@media (min-width: 768px) { /* tablet */ }
@media (min-width: 1024px) { /* portátil */ }
@media (min-width: 1280px) { /* escritorio amplio */ }
Consejo experto: elige los breakpoints según dónde se rompe tu contenido, no según modelos concretos de dispositivo. Redimensiona la ventana y, cuando el diseño empiece a verse mal, ahí pones el breakpoint.
Por qué min-width encaja con mobile-first
Con mobile-first usamos min-width (de pequeño hacia grande):
- El estilo base (fuera de media queries) es el del móvil.
- Cada
@media (min-width: ...)añade mejoras conforme hay más espacio. - Las reglas se acumulan de menor a mayor ancho, en orden creciente.
El enfoque opuesto, max-width (de grande hacia pequeño), es desktop-first:
empiezas con el escritorio y vas recortando. Funciona, pero suele acabar en más
código y más excepciones. Para la mayoría de proyectos, mobile-first +
min-width es la opción recomendada.