Diseño adaptativo y puntos de fractura

1) Principios

1. Contenido-primero: los diseños se construyen a partir de tareas y contenidos, no de anchos «populares».
2. Mobile-first: empezamos con una opción simple y rigurosa y nos complicamos a medida que crecen las posibilidades de entrada/ancho.
3. Enhancement progresivo: UX básico funciona sin JS/animaciones; las mejoras se conectan según las condiciones.
4. Consistencia: los mismos patrones son el mismo comportamiento en todos los rompimientos.
5. Performance-aware: imágenes, cuadrículas y scripts se adaptan en peso y complejidad.

2) Puntos de fractura (breakpoints)

Seleccionamos por datos de dispositivos reales y por cambio de patrón (altavoces/navegación/tipografía).

Conjunto recomendado (punto de referencia)

• El breakpoint sólo se introduce cuando se cambia la estructura (por ejemplo, 1→2 las columnas de las tarjetas, la aparición de la barra lateral).
• Se admiten roturas locales dentro del componente (solicitudes contenedoras).

3) Solicitudes de contenedores vs proyectos de medios de comunicación

Cuando los medios de comunicación '@ media': cambia el layout de toda la página (navegación, plantilla).
Cuando contenedor '@ container': la tarjeta/widget debe ajustarse a su ancho disponible (el componente es independiente de la página).

css
/ Включаем контейнерную оценку для блока /
.widget { container-type: inline-size; }

/ Внутри — адаптируем карточку по ширине контейнера /
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

Utilice el conjunto: medios para el marco de página + contenedores para los componentes.

4) Tipografía: fluid + pasos

Combine 'clamp ()' y los pasos de breakpoints.

css
:root {
/ Базовая fluid-гарнитура /
--fs-body: clamp(15px, 1.2vw + 0.2rem, 18px);
--fs-h2:  clamp(20px, 1.6vw + 0.4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1.55; }
h2  { font-size: var(--fs-h2);  line-height: 1.3; }
@media (min-width: 1200px) {
h2 { letter-spacing:.005em; } / тонкая настройка на LG+ /
}

• Longitud de la línea 45-80 caracteres (en las barras laterales 36-60).
• Los pasos de las magnitudes son múltiples 4/8-pt; línea-height estable por breakpoints.

5) Cuadrículas y módulos

A nivel de sección, CSS Grid (columnas, áreas); adentro - Flex.
Las alturas de los componentes son múltiples de baseline (por ejemplo, 40/48/56 px).
Tenemos 2 presets de la densidad: Comfort (lectura/dashboards) y Compact (tablas/pro).

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6) Imágenes y medios

html
<img src="card-640.jpg"
srcset="card-640.jpg 640w, card-960.jpg 960w, card-1280.jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt="Описание">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

Para fondos - 'image-set ()' y lazy-loading.
El texto de la imagen es sólo en el dados/overlay; contraste ≥ AA.

7) Patrones de navegación y respuesta

XS/SM: bottom-nat o hamburguesa, notable CTA; la búsqueda oculta se abre encima.
MD: aparece persistente-sidebar/mega-menu.
LG/XL: dos niveles de navegación, filtros rápidos, migas de pan.

Comportamiento: los elementos no se «mueven» caóticamente - siempre uno de los esquemas previamente descritos.

8) Entrada: hover/touch/keyboard

css
@media (hover: hover) and (pointer: fine) { / hover-эффекты / }
@media (hover: none), (pointer: coarse)  { / touch-паттерны / }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• No hay contenido crítico «sólo en hover».
• Zonas de clic: ≥ 44 × 44 (amb.) , ≥ 32 × 32 (escritorio).
• El teclado es compatible en todos los rompimientos.

9) Zonas seguras y cortes del sistema

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) Temas oscuros/ligeros y contraste

Los temas son independientes de los breakpoints: los objetivos de contraste son los mismos en todas partes.
En XS evitamos los acentos «ácidos»; elevamos la luminosidad de las referencias sobre un fondo oscuro.
Soporte para 'prefers-color-scheme' y interruptor manual.

11) Rendimiento

Los CSS críticos son en línea o a través de la estrategia 'media =' print '/preload; Cargamos JS pospuesto.
Evite las animaciones layout-heavy en listas largas; animar 'opacity/transformación'.
Carga perezosa de imágenes/widgets; skeleton en lugar de spinners.
Limite las sombras/filtros «pesados» a docenas de tarjetas.

12) Tokens del sistema de diseño (ejemplo)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) Taller de componentes (roturas de contenedores)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1.2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS: vista stacked (etiqueta a la izquierda, valor a la derecha, bloques).
• SM +: scroll horizontal sólo cuando hay un exceso de columnas, fijamos la tapa/primera columna.
• Los números son números tabulares, alineación decimal.

14) Localización y RTL

'dir = "rtl'' + ': dir (rtl)' para espejar iconos/flechas/margin-s.
Las traducciones pueden aumentar la longitud de las filas en un 20-30% - establecer un margen.
Para algunas escrituras (por ejemplo, georgiano/tailandés), aumente el kegl básico en 1 px.

15) Especificidad de iGaming

Tarjetas de torneos/bonos: cuadrícula 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA y condiciones - en la zona permanente.
Líderes/clasificaciones: gorra de sticky/primera columna; en XS - modo stacked; los números son monosílabos.
Formularios de pago: en XS - de una sola columna; en MD - 2 columnas (campo + explicación).
Avisos responsables (18 +, límites, riesgos): siempre visibles en todos los breakpoints, contraste AAA, sin «esconderse en el hover».

16) Anti-patrones

Anchuras de bloque fijas en lugar de cuadrículas/columnas.
«Punto de fractura en cada píxel»: demasiados medios de comunicación → caos.
Ritmo roto: diferentes gutter/campos en secciones adyacentes sin motivo.
Texto crítico en una imagen sin dados.
Contenido que sólo está disponible en hover (no se puede acceder a él).
Animaciones de propiedades layout en listas largas.

17) Lista de comprobación de QA

Cuadrícula y contenedores

• Las columnas y gutter corresponden a breakpoints; los contenedores están centrados.
• Los componentes «fluyen» correctamente 1→2→3 la columna sin romperse.

Tipografika

• Longitud de línea 45-80; fluid-kegli a través de 'clamp ()'.
• El contraste del texto corresponde a WCAG en ambos temas.

Imágenes

• Есть `srcset/sizes`, `aspect-ratio` и lazy-loading; No hay CLS.

Entrada y A11y

• Navegación por teclado; ': focus-visible' es visible.
• Alternativa a hover en el tach; zonas de la cábala ≥ 44 × 44.
• 'prefers-reduced-motion' apoyado.

Rendimiento

• Sólo se animan 'transformación/opacity'; los efectos pesados son limitados.
• Los CSS/JS críticos se cargan de manera eficiente.

18) Documentación en el sistema de diseño

"Responsive & Breakpoints': tabla de rompimientos, contenedores, columnas y gutter.
«Container Queries»: ejemplos de componentes adaptativos.
«Tipo fluido»: fórmulas de 'clamp ()' y preconfiguración de escalas.
«Patrones de navegación»: XS/SM/MD/LG/XL-variantes.
"Do/Don 't' con clips cortos y valores CLS/LCP.

Resumen breve

La adaptabilidad es una estrategia, no un conjunto de programas de medios caóticos. Confíe en el contenido y la analítica de los dispositivos, combine los programas multimedia con la cuadrícula madura y las solicitudes de contenedores, aplique el 'clamp ()' para la tipografía, controle las imágenes y el rendimiento, mantenga todas las formas de entrada y A11y. Así que la interfaz sigue siendo predecible, rápida e igualmente conveniente en cualquier pantalla.