Curso de CSS / consultas de medios y puntos de cambio según el contenido

Las consultas de medios aplican CSS cuando se cumplen condiciones específicas del entorno, como un umbral de ancho de la ventana de visualización. Elige un punto de interrupción donde el contenido real necesite un diseño diferente y ten en cuenta tanto el ancho del componente como el espacio circundante.

Combina estilos base y condicionales

Las reglas fuera de las consultas de medios proporcionan la línea base. Cuando una condición coincide, sus declaraciones se unen a la cascada; no eliminan las declaraciones de línea base no relacionadas. Antes de agregar un punto de interrupción, verifica si el tamaño flexible puede acomodar el contenido de manera natural. Consulta diseño fluido con anchuras relativas, min() y clamp().

.cards { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 33rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

Aquí, usamos el mismo selector y definimos primero la distribución de una columna, por lo que la declaración condicional subsecuente sobrescribe esa propiedad. No deberías generalizar que “el código a continuación siempre ganará” en todos los casos. Compara el orden de las declaraciones cuando la importancia, la prioridad de la capa de la cascada y el selector, etc., son los mismos. Si las condiciones son verdaderas pero no hay cambios, verifica si aparece un tachado en otras reglas en las herramientas de desarrollo.

Calcula los puntos de cambio a partir de los requisitos de las tarjetas

Primero, reduce la anchura de una tarjeta y observa cuándo empieza a resultar difícil de leer. En la práctica, el objetivo de ancho mínimo, incluyendo el borde y el relleno de la tarjeta, se establece en 16rem. Este no es un valor estándar que se ajuste a todos los sitios, pero es un requisito de diseño para este ejemplo. Debes intentar incluir un título y una descripción largos y cambiarlo para que coincida con la fuente y el contenido reales.

El ancho de contenido requerido para dos columnas es de 33rem, que es 16rem×2 más 1rem de espacio entre columnas. Si el relleno izquierdo y derecho del texto es de 1rem cada uno, el ancho de la ventana gráfica requerido es de 35rem. Por eso, el ejemplo completo comienza las dos columnas en 35rem. El fragmento inicial de 33rem solo ilustra la sintaxis; todavía no incluye esos 2rem de relleno exterior. Tres columnas son 16rem×3 + espacio 1rem×2 + relleno izquierdo y derecho 2rem. Se requieren 52rem.

La razón por la que no añadimos el espacio dentro de la tarjeta de nuevo al cálculo de la tabla es porque ya lo hemos incluido en nuestro objetivo de ancho mínimo de 16rem. Por el contrario, si el cuerpo principal divide el ancho desde la barra lateral, es difícil garantizar el espacio de la tarjeta solo con la ventana gráfica. En ese caso, considera recalcular las condiciones del diseño externo o determinar el diseño interno de la parte utilizando consultas de contenedor CSS para componentes reutilizables.

Comprende rem y los límites inclusivos

min-width es válido cuando es igual o mayor que el ancho especificado, y max-width es válido cuando es igual o menor que el ancho especificado. Si el tamaño de fuente inicial es de 16px, 35rem son 560px y 52rem son 832px. No siempre describimos rem como un valor fijo en px, ya que el valor convertido puede variar dependiendo de la configuración inicial de la fuente del usuario o del navegador.

La longitud relativa en las consultas de medios utiliza el valor inicial, no el tamaño de fuente sobrescrito por el CSS de la página. Por ejemplo, agregar html { font-size: 32px; } al CSS no convierte automáticamente la condición de 35rem en una condición de 1120px. Se debe hacer una distinción entre los cambios en el tamaño rem del texto y los cambios en las condiciones de medios. Este principio se describe en la especificación de Media Query de CSS basada en unidades.

/* Both conditions are true even at 560px. */
@media (max-width: 560px) { /* narrow screen rule */ }
@media (min-width: 560px) { /* wide screen rule */ }

Como se muestra arriba, las condiciones mínimas y máximas con el mismo límite se superponen en los puntos coincidentes. Puedes reducir este problema agregando condiciones de ancho por defecto y mínimo en etapas. Las condiciones de dos columnas y tres columnas también son ciertas en pantallas grandes, pero usar el mismo selector y las mismas propiedades que en el ejemplo completo y escribir la regla de tres columnas después produce el efecto deseado.

Amplía de una a dos y tres columnas

Guárdalo como un archivo media-breakpoint.html y ábrelo en tu navegador. No se necesitan archivos externos. El ejemplo contiene tres tarjetas con títulos, enlaces y una cadena larga para comprobar su adaptación.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>media-breakpoint.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.content { width: min(100%, 70rem); margin-inline: auto; padding: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; background: #eef5fa; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card a { display: inline-block; padding: .5rem; }
@media (min-width: 35rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="content"><h1>Choose breakpoints based on the content</h1>
<p>The target minimum card width is 16rem, including the border and padding.</p>
<div class="cards">
<article class="card"><h2>Files and screen settings to prepare</h2><p>The description and link should follow naturally even when the heading wraps onto several lines.</p><a href="#result">Read the first description</a></article>
<article class="card"><h2>Options for narrow screens</h2><p>Reduce the number of columns to make room instead of simply shrinking the text.</p><a href="#result">Read the second description</a></article>
<article class="card"><h2>English identifier</h2><p>ARTICLE_REFERENCE_WITHOUT_SPACES_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><a href="#result">Read the third description</a></article>
</div><p id="result">Check that links and keyboard focus remain visible on the screen.</p></main>
</body>
</html>

Usar un mínimo de 0 en minmax(0, 1fr) y min-width: 0 en las tarjetas evita que las columnas se salgan de la pantalla debido a contenido largo. Sin embargo, el propósito de este ejemplo es reducir el número de columnas en lugar de forzar que solo quepan las letras. Con el ancho máximo del cuerpo de 70rem, las columnas no continúan expandiéndose infinitamente, sino que tres tarjetas dividen el espacio restante.

Prueba justo antes y después de cada punto de cambio

1. Compara 559px, 560px y 561px en un entorno con un tamaño de fuente inicial de 16px. 559px debería ser 1 columna, 560px debería ser 2 columnas.
2. Compara 831px, 832px y 833px. 831px debería ser 2 columnas, 832px debería ser 3 columnas. Asegúrate de que el ancho de la tarjeta sea al menos de 16rem incluso cuando alcances la intersección exacta.
3. Cambia solo los puntos de interrupción de dos columnas de 35rem a 30rem. A 480px, observa si el ancho de la tarjeta se vuelve más pequeño que el objetivo y el número de líneas del título aumenta, luego restáuralo a 35rem.
4. Registra por separado las pruebas que cambian la fuente predeterminada del navegador y las que solo cambian font-size de html en el CSS. No lo trates como el mismo experimento, pero verifica nuevamente el ancho y la colocación de las tarjetas en cada condición.

Las consultas de medios pueden probar la orientación, las capacidades de entrada y una preferencia por reducir el movimiento, así como el ancho. Una pantalla estrecha no significa necesariamente un dispositivo táctil, y una pantalla ancha no garantiza un mouse. Completa primero el diseño basado en el ancho, después añade otras condiciones donde la función las requiera. La guía MDN para usar consultas de medios explica su sintaxis y condiciones del entorno.