Conception adaptative et points de fracture

1) Principes

1. Contenu-first : les mises en page sont construites à partir de tâches et de contenus, et non pas à partir de shirines « populaires ».
2. Mobile-first : nous commençons par une option stricte et simple et nous compliquons à mesure que la largeur/capacité d'entrée augmente.
3. Enhancement progressif : l'UX de base fonctionne sans JS/animation ; les améliorations sont connectées selon les conditions.
4. Consistency : les mêmes schémas sont le même comportement sur tous les breakpoints.
5. Performance-aware : les images, les grilles et les scripts s'adaptent en fonction du poids et de la complexité.

2) Points de fracture (breakpoints)

Nous choisissons selon les données des périphériques réels et par changement de modèle (colonnes/navigation/typographie).

Kit recommandé (repère)

• Breakpoint n'est introduit que lors du changement de structure (par exemple, les colonnes de cartes 1→2, l'apparition du sidbar).
• Les pauses locales à l'intérieur du composant (requêtes conteneurisées) sont autorisées.

3) Demandes de conteneurs vs demandes de médias

Lorsque les demandes de médias '@ media' : change la page entière (navigation, modèle).
Lorsque conteneur '@ container' : la carte/widget doit s'adapter à sa largeur disponible (le composant est indépendant de la page).

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

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

Utilisez le ligament : média pour le cadre de page + conteneurs pour les composants.

4) Typographie : fluid + étapes

Combinez 'clamp ()' et les étapes 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+ /
}

• Longueur de la ligne 45-80 caractères (sur les sidebars 36-60).
• Les pas sont multiples de 4/8-pt ; line-height stable par breakpoints.

5) Grilles et modules

Au niveau des sections - CSS Grid (colonnes, zones) ; à l'intérieur - Flex.
Les hauteurs des composants sont multiples de baseline (par exemple, 40/48/56 px).
Nous avons 2 préréglages de densité : Comfort (lecture/dashboards) et Compact (tables/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) Images et médias

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; }

Pour les arrière-plans - 'image-set ()' et lazy-loading.
Texte sur l'image - seulement sur le réservoir/overlay ; contraste ≥ AA.

7) Modèles de navigation et de responsabilité

XS/SM : bottom-nav ou hamburger, notoire CTA ; la recherche cachée est révélée au-dessus.
MD : persistent-sidebar/mega-menu apparaît.
LG/XL : deux niveaux de navigation, filtres rapides, miettes de pain.

Comportement : les éléments ne « bougent » pas de manière chaotique - toujours l'un des schémas décrits à l'avance.

8) Entrée : 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; }

• Aucun contenu critique « seulement dans hover ».
• Zones de clic : ≥ 44 × 44 (mob.) , ≥ 32 × 32 (bureau).
• Le clavier est pris en charge sur tous les breakpoints.

9) Zones de sécurité et découpes système

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) Thème sombre/lumineux et contraste

Les thèmes sont indépendants des breakpoints : les objectifs de contraste sont les mêmes partout.
Sur XS, on évite les accents « acides » ; nous augmentons la luminosité des références sur un fond sombre.
Prend en charge 'prefers-color-scheme' et le commutateur manuel.

11) Performance

Les CSS critiques sont inline ou via 'media = « print »/preload strategy ; JS est téléchargé en différé.
Éviter les animations layout-lourdes sur de longues listes ; animez 'opacity/bou'.
Chargement paresseux des images/widgets ; skeleton au lieu des spinners.
Limitez les ombres/filtres « lourds » sur des dizaines de cartes.

12) Tokens de système de conception (exemple)

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) Atelier des composants (breaks conteneurisés)

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 : vue stacked (label à gauche, valeur à droite, blocs).
• SM + : scroll horizontal seulement en cas d'excès de colonnes, nous fixons le chapeau/la première colonne.
• Nombres - tabular-nums, alignement décimal.

14) Localisation et RTL

'dir =' rtl '+' : dir (rtl) 'pour la mise en miroir des icônes/flèches/margin-s.
Les traductions peuvent augmenter la longueur des lignes de 20 à 30 % - placez votre stock.
Pour certaines écritures (par exemple géorgienne/thaïlandaise), augmentez le cègle de base de 1 px.

15) Spécificité iGaming

Cartes de tournoi/bonus : grille 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) ; CTA et conditions - dans la zone permanente.
Leaders/classements : sticky-chapeau/première colonne ; sur XS - mode stacked ; les nombres sont monosirins.
Formulaires de paiement : sur XS - à colonne unique ; sur MD - 2 colonnes (champ + explication).
Notifications responsables (18 +, limites, risques) : toujours visible sur tous les breakpoints, contraste AAA, sans « caché dans le hover ».

16) Anti-modèles

Largeurs de blocs fixes au lieu de maillage/colonnes.
« Point de fracture par pixel » : trop de demandes de médias → de chaos.
Rythme cassé : différents gutter/champs dans les sections adjacentes sans raison.
Texte critique sur une image sans fauteuil.
Contenu disponible uniquement avec hover (impossible à atteindre sur la tache).
Animations de propriétés layout sur des listes longues.

17) Liste de vérification QA

Grille et conteneurs

• Les colonnes et gutter correspondent aux breakpoints ; les conteneurs sont centrés.
• Les composants « coulent » correctement 1→2→3 les colonnes sans cassure.

Imprimerie

• Longueur de la ligne 45-80 ; fluid-kegli via 'clamp ()'.
• Le contraste du texte correspond au WCAG dans les deux thèmes.

Images

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

Entrée et A11y

• La navigation par clavier ; ': focus-visible' est visible.
• Alternative au hover par tache ; les zones de la cabale ≥ 44 × 44.
• 'prefers-reduced-motion' est pris en charge.

Performances

• Seules les formes/opacités sont animées ; les effets graves sont limités.
• Les CSS/JS critiques sont chargés efficacement.

18) Documentation dans le système de conception

« Responsive & Breakpoints » : table des breakpoints, conteneurs, colonnes et gutter.
« Container Queries » : exemples de composants adaptatifs.
« Fluid Type » : Formules 'clamp ()' et précontraintes d'échelles.
« Patterns de navigation » : Options XS/SM/MD/LG/XL.
« Do/Don't » avec des clips courts et des valeurs CLS/LCP.

Résumé succinct

L'adaptabilité est une stratégie, pas un ensemble de demandes de médias chaotiques. S'appuyer sur le contenu et l'analyse des périphériques, combiner les demandes de médias avec une grille mature et des requêtes conteneurisées, appliquer 'clamp ()' pour la typographie, contrôler les images et les performances, prendre en charge toutes les méthodes de saisie et de A11y. L'interface reste donc prévisible, rapide et tout aussi conviviale sur n'importe quel écran.