Responsive y @Rules

@media Responsive

Aplica estilos según características del dispositivo. Base del diseño responsivo.

Redimensiona la ventana

/* Mobile first */
.wrap { padding: 16px; }

@media (min-width: 768px) {
  .wrap { padding: 32px; }
}
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}
@media print { nav { display: none; } }

@container Container Query

Aplica estilos según el tamaño del contenedor padre, no del viewport. CSS moderno (2023+).

.wrap {
  container-type: inline-size;
  container-name: tarjeta;
}

@container tarjeta (min-width: 300px) {
  .tarjeta { flex-direction: row; }
}

/* Unidades de contenedor */
.titulo { font-size: 5cqi; }
/* cqw  cqh  cqi  cqb  cqmin  cqmax */

@layer · @supports · @import @Rules

@layer organiza la cascada en capas explícitas. @supports aplica estilos según soporte del navegador.

/* @layer — orden de cascada */
@layer reset, base, components, utils;

@layer base { h1 { font-size: 2rem; } }
@layer utils { .mt-4 { margin-top: 1rem; } }

/* @supports */
@supports (display: grid) {
  .layout { display: grid; }
}
@supports not (backdrop-filter: blur(4px)) {
  .glass { background: rgba(255,255,255,.9); }
}

Unidades CSS Unidades

Absolutas (px), relativas al elemento (em, %), al root (rem), al viewport (vw/vh) y al contenedor (cqi).

pxPíxel absoluto

%Relativo al padre

emRelativo al font-size del elemento

remRelativo al :root font-size (16px)

vw / vh1% del ancho/alto del viewport

dvhDynamic viewport height (móvil correcto)

chAncho del carácter "0"

frFracción del espacio libre en grid

cqi1% del inline-size del contenedor

Tipografía fluida con clamp() Tipografía

Escala el tamaño de fuente proporcionalmente al viewport, con límites mínimo y máximo. Sin breakpoints.

Redimensiona la ventana para ver el cambio

min: 1rem ideal: 2.5vw max: 2rem

font-size: clamp(1rem, 2.5vw, 2rem);

object-fit · object-position Media

Controla cómo <img>, <video> u otros elementos reemplazados llenan su caja de contenido.

fill

contain

cover

none

img { object-fit: cover; object-position: center top; }

dvh · svh · lvh · dvw · cqw Unidades modernas

Las unidades de viewport dinámicas solucionan el problema clásico de 100vh en iOS donde la barra del navegador ocupa espacio extra.

lvh
Large viewport
(sin barras)

svh
Small viewport
(con barras)

dvh
Dynamic
(cambia al scroll)

/* Antes — problema en móvil */
.hero { height: 100vh; }

/* Ahora — correcto */
.hero { height: 100dvh; }

/* Mínimo seguro */
.panel { min-height: 100svh; }

prefers-reduced-motion Accesibilidad

Media query para respetar la preferencia del usuario de reducir animaciones. Importante para personas con vértigo o epilepsia fotosensible.

/* Patrón recomendado */
.animated {
  animation: spin 2s linear infinite;
  transition: transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
    transition: none;
  }
  /* O versión más suave */
  .animated {
    animation-duration: 0.01ms !important;
  }
}

/* En JS */
const noMotion = matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

@media print Impresión

Estilos aplicados solo al imprimir. Elimina navegación, ajusta fuentes, fuerza colores para papel y evita cortes en el contenido.

@media print {
  /* Ocultar elementos de UI */
  nav, header, footer, .sidebar,
  .ads, button { display: none !important; }

  /* Optimizar tipografía */
  body {
    font-size: 12pt;
    color: black;
    background: white;
  }

  /* Evitar cortes en tarjetas */
  .card  { break-inside: avoid; }
  h2, h3 { break-after: avoid; }

  /* Mostrar URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #555;
  }
}

CSS Responsive & @Rules