Media queries en CSS

Breakpoints que adaptan un layout, escritos mobile first.

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

@media (width >= 48rem) {
  .layout {
    grid-template-columns: 16rem 1fr;
    gap: 1.5rem;
  }
}

@media print {
  .site-header,
  .toast {
    display: none;
  }
}

Cómo funciona

1. Las queries de min-width suman reglas conforme crece la pantalla.
2. La sintaxis de rango como (width >= 48rem) se lee más claro.
3. Agrupa la query alrededor de las reglas que cambia, no de toda la hoja.

Palabras clave y builtins usados aquí

• display
• gap
• grid
• media
• rem

El intento, en números

Líneas

19

Caracteres a escribir

211

Tokens

60

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 42 segundos.

Escribe este fragmento

Paso 1 de 4 en Responsivo; paso 1 de 21 en CSS responsivo y moderno.

Siguiente →