CSS
Uso de media queries para adaptar estilos según viewport, orientación, resolución, interacción y preferencias del usuario sin depender de dispositivos concretos.
Media queries aplican reglas según características del viewport, dispositivo o preferencias del usuario.
@media (width >= 48rem) {
.layout {
grid-template-columns: 16rem 1fr;
}
}.layout {
display: grid;
gap: 1rem;
}
@media (width >= 48rem) {
.layout {
grid-template-columns: 16rem 1fr;
}
}La base funciona con poco espacio y se mejora cuando cabe otra estructura.
Mobile-first no significa diseñar solo teléfonos; significa comenzar desde restricciones y añadir capacidad.
@media (30rem <= width < 60rem) { ... }Expresa rangos de forma legible. Para compatibilidad con navegadores muy antiguos puede utilizarse min/max syntax.
Usa width para el viewport CSS. device-width describe hardware y rara vez sirve para layout moderno.
@media (orientation: landscape) { ... }
@media (aspect-ratio > 3 / 2) { ... }Orientation no identifica tipo de dispositivo; una ventana desktop puede ser estrecha y vertical.
@media (hover: hover) and (pointer: fine) {
.card:hover { transform: translateY(-2px); }
}hover: capacidad del input principal.any-hover: cualquiera de los inputs.pointer: precisión principal.any-pointer: cualquiera disponible.No ocultes acciones esenciales detrás de hover.
@media (prefers-reduced-motion: reduce) { ... }
@media (prefers-color-scheme: dark) { ... }
@media (prefers-contrast: more) { ... }
@media (forced-colors: active) { ... }Son preferencias o modos del usuario, no temas decorativos para ignorar.
@media (resolution >= 2dppx) { ... }Útil en casos especializados. Responsive images mediante HTML suelen ser mejores para elegir recursos raster.
@media print {
nav,
.actions {
display: none;
}
}No olvides contraste, URLs y fragmentación.
@media (width >= 48rem) and (hover: hover) { ... }
@media not (prefers-reduced-motion: reduce) { ... }Comas separan alternativas OR.
Añade un breakpoint cuando el diseño deja de funcionar, no porque exista un dispositivo popular.
Prueba:
¿Por qué orientation: portrait no significa “teléfono”?
Porque solo compara proporciones del viewport; cualquier ventana más alta que ancha puede cumplirla.
Container queries adapta un componente al espacio que realmente recibe.