Design adaptativo e pontos de fratura

1) Princípios

1. Conteúdo-first: os layouts são construídos a partir de tarefas e conteúdos, e não de shirines «populares».
2. Mobile-first: Começamos com uma versão simples e complexa à medida que a largura e a capacidade de entrada crescem.
3. Progressive enhancement: O UX básico funciona sem JS/animações; melhorias são conectadas de acordo com os termos.
4. Consistency: Patterns iguais - comportamento idêntico em todos os breakpoint.
5. Performance-aware: Imagens, grades e script são adaptados em peso e complexidade.

2) Pontos de fratura (breakpoint)

Selecionamos de acordo com os dispositivos reais e por mudança de pattern (coluna/navegação/tipografia).

Conjunto recomendado (referência)

• O breakpoint só é digitado quando você muda de estrutura (por exemplo, 1→2 colunas de cartões, aparecimento de sidbar).
• Os breakes locais dentro do componente (solicitações de contêiner) são válidos.

3) Pesquisas de contêiner vs mídia

Quando a mídia '@ media' muda o layout da página inteira (navegação, modelo).
Quando os contentores '@ container': cartão/widget devem se ajustar à sua largura disponível (o componente é independente da página).

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

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

Use o laço: mídia para quadro de página + contêineres de componentes.

4) Tipografia: fluid + passos

Combine 'clamp ()' com os passos de breakpoint.

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+ /
}

• Comprimento de linha de 45 a 80 caracteres (saidbar 36-60).
• Os passos de magnitude são múltiplos de 4/8-pt; line-height estável em breakpoint.

5) Grades e pods

No nível de secção, CSS Grid (colunas, áreas); dentro, Flex.
As alturas dos componentes são múltiplas baseline (por exemplo, 40/48/56 px).
Temos 2 de densidade predial Comfort (leitura/dashboard) e Compact (tabelas/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) Imagens e mídia

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 os fundos - 'image-set ()' e lazy-loading.
O texto da imagem é apenas na tinta/overlay; contraste ≥ AA.

7) Navegação e responsive-pattern

XS/SM: bottom-naav ou hamburger, notável CTA; a pesquisa oculta é aberta acima.
MD: Aparecerá persistent-sidebar/mega-menu.
LG/XL: dois níveis de navegação, filtros rápidos, migalhas de pão.

Comportamento: os elementos não «mudam» de forma caótica - sempre um dos esquemas pré-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; }

• Nada de conteúdo crítico «apenas em hover».
• Zonas de clique: ≥ 44 x 44 (mob.) , ≥ 32 x 32 (desctop).
• O teclado é suportado em todos os breakpoint.

9) Áreas seguras e cortes de 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) Tópico escuro/claro e contraste

Os temas são independentes dos breakpoint, os objetivos de contraste são iguais em todos os lugares.
Em XS, evitamos acentos «ácidos»; Aumentamos a claridade das referências no fundo escuro.
Suporte para 'preferers-cor-scheme' e para o botão manual.

11) Desempenho

Criticar CSS - inline ou através de 'media = "prince '/pronoad estratégia; O JS é postergado.
Evite animações pesadas layout em listas longas; Animar 'opacity/transform'.
Carregamento preguiçoso de imagens/widgets; skeleton em vez de spinners.
Limite as sombras ou filtros pesados em dezenas de cartões.

12) Sistema de design de tokens (exemplo)

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) Treinamento de componentes (brechós de contêiner)

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 (selo à esquerda, valor à direita, blocos).
• SM +: O scroll horizontal é apenas quando há excesso de colunas, fixando o chapéu/primeira coluna.
• Números - tabular-nums, alinhamento decimal.

14) A localização e o'SE '

'dir =' ',' + ': dir' para espelhar ícones/atiradores/margin-ov.
Traduções podem aumentar o comprimento de linhas entre 20% e 30% - coloque o estoque.
Para algumas escrituras (por exemplo, georgiano/tailandês), aumente a caixinha básica em 1 px.

15) Especificidades iGaming

Cartões de torneio/bónus: grade 3 x N (LG), 2 x N (MD), 1 x N (SM/XS); CTA e condições - em uma área permanente.
Líderes/classificações: sticky chapéu/primeira coluna; no modo XS - modo stacked; os números são monossiráticos.
Formulários de pagamento: XS - invertebrados; em MD - 2 colunas (campo + explicação).
Notificações responsáveis (18 +, limites, riscos): Sempre visível em todos os breakpoint, contraste AAA, sem «escondido em hover».

16) Anti-pattern

Largura fixa de blocos em vez de grade/coluna.
Ponto de fratura por pixel, demasiados meios de comunicação → caos.
Ritmo quebrado: diferentes gutter/campos em seções vizinhas sem razão.
Texto crítico na imagem sem tinta.
Conteúdo disponível apenas para hover (por taco não disponível).
Animações de propriedades layout em listas longas.

17) QA-folha de cheque

Grade e contêineres

• Colunas e gutter correspondem a breakpoint; contêineres centralizados.
• Os componentes são «arrastados» corretamente 1→2→3 colunas sem quebra.

Tipografia

• Comprimento de linha 45-80; fluid-kegli através de 'clamp ()'.
• O contraste de texto corresponde ao WCAG em ambos os temas.

Imagens

• Есть `srcset/sizes`, `aspect-ratio` и lazy-loading; Não há CLS.

Entrada e A11y

• Navegação por teclado; ': focus-visível' é visível.
• Alternativa hover por tubo; zonas de clique ≥ 44 x 44.
• 'preferers-reduced-motion' está suportado.

Desempenho

• Só se pode animar 'transfm/opacity'; os efeitos pesados são limitados.
• CSS/JS críticos são carregados com eficiência.

18) Documentação em design

"Responsive & Breakpoints': tabela de breakpoint, contêineres, colunas e gutter.
Container Qualies: exemplos de componentes adaptáveis.
Tipo Fluid: fórmulas 'clamp ()' e antevisão de escalas.
«Pattern de navegação»: XS/SM/MD/LG/XL opções.
«Do/Don 't» com clipes curtos e valores CLS/LCP.

Resumo breve

Adaptabilidade é uma estratégia, não um conjunto de mídia caótica. Baseie-se em conteúdo e análise de dispositivos, combine mídia com grade madura e pedidos de contêiner, aplique 'clamp ()' para tipografia, controle de imagens e desempenho, suporte de todas as formas de inserção e A11y. Assim, a interface permanece previsível, rápida e igualmente confortável em qualquer tela.