Adaptiv dizayn və sınıq nöqtələri

1) Prinsiplər

1. Məzmun first: Maketlər «populyar» enlərdən deyil, vəzifələrdən və məzmundan qurulur.
2. Mobile-first: Biz ciddi sadə variantdan başlayırıq və genişlik/giriş imkanları artdıqca çətinləşdiririk.
3. Progressive enhancement: əsas UX JS/animasiyasız işləyir; təkmilləşdirmələr şərtlərinə görə qoşulur.
4. Consistency: eyni nümunələr - bütün breakpoint eyni davranış.
5. Performance-aware: Şəkillər, şəbəkələr və skriptlər ağırlıq və mürəkkəbliyə görə uyğunlaşır.

2) Sınıq nöqtələri (fasilə nöqtələri)

Real cihazların məlumatlarına və nümunənin dəyişdirilməsinə görə seçirik (sütunlar/naviqasiya/tipoqrafiya).

Tövsiyə olunan dəst

• Breakpoint yalnız struktur dəyişdikdə tətbiq edilir (məsələn, 1 → 2 kartı sütunları, sidbar görünüşü).
• Komponent daxilində lokal fasilələr (konteyner sorğuları) mümkündür.

3) Konteyner sorğuları vs media sorğuları

Media sorğuları '@media' olduqda: bütün səhifənin layout (naviqasiya, şablon) dəyişir.
Konteyner '@container' olduqda: kart/widget mövcud eninə uyğun olmalıdır (komponent səhifədən asılıdır).

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

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

Bir dəstə istifadə edin: səhifə çərçivəsi üçün media + komponentlər üçün konteynerlər.

4) Tipoqrafiya: fluid + addımlar

'clamp ()' və breakpoint addımlarını birləşdirin.

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

• Sətrin uzunluğu 45-80 işarədir (saydbarlarda 36-60).
• Ölçü addımları 4/8-pt; line-height fasilə nöqtələri ilə sabitdir.

5) Mesh və modullar

Bölmələr səviyyəsində - CSS Grid (sütunlar, sahələr); daxilində - Flex.
Komponentlərin hündürlüyü baseline-dir (məsələn, 40/48/56 px).
2 sıxlıq preseti var: Comfort (oxu/dashboard) və Compact (cədvəllər/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) Şəkillər və Media

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

Fon üçün - 'image-set ()' və lazy-loading.
Şəkildəki mətn - yalnız lövhədə/overleydə; AA ≥ kontrast.

7) Naviqasiya və responsive-patternlər

XS/SM: bottom-nav və ya hamburger, nəzərə çarpan CTA; gizli axtarış yuxarıda açılır.
MD: persistent-sidebar/mega-menu görünür.
LG/XL: iki səviyyəli naviqasiya, sürətli filtrlər, çörək qırıntıları.

Davranış: Elementlər xaotik şəkildə «hərəkət etmirlər» - həmişə əvvəlcədən təsvir edilmiş sxemlərdən biridir.

8) Giriş: 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; }

• Kritik məzmun yoxdur «yalnız hover».
• Klik zonaları: ≥ 44 × 44 (mob.) , ≥ 32 × 32 (masaüstü).
• Klaviatura bütün fasilə nöqtələrində dəstəklənir.

9) Təhlükəsiz zonalar və sistem kəsikləri

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) Qaranlıq/parlaq mövzu və kontrast

Mövzular fasilələrdən asılıdır: kontrastın məqsədləri hər yerdə eynidir.
XS-də «turşu» vurğularından qaçırıq; qaranlıq fonda bağlantıların işıqlığını artırın.
Dəstək 'prefers-color-scheme' və əl açarı.

11) Performans

Kritik CSS - inline və ya vasitəsilə 'media = «print» '/preload strategiyası; JS gecikdirilir.
Uzun siyahılarda layout-ağır animasiyalardan çəkinin; 'opacity/transform' animasiya edin.
Şəkil/widget 'ların tənbəl yüklənməsi; spinner əvəzinə skeleton.
Onlarla kart üzərində «ağır» kölgələri/filtrləri məhdudlaşdırın.

12) Dizayn sistemi tokenləri (nümunə)

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) Komponent təcrübəsi (konteyner fasilələri)

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: stacked-view (soldakı etiket, sağdakı qiymət, bloklar).
• SM +: üfüqi qıvrım yalnız sütunlar çox olduqda, şapka/birinci sütunu düzəldir.
• Ədədlər - tabular-nums, onluq üzrə bərabərləşdirmə.

14) Lokalizasiya və RTL

'dir = "rtl' '+': dir (rtl) 'ikonları/oxları/margin-ları əks etdirmək üçün.
Tərcümələr sətir uzunluğunu 20-30% artıra bilər - ehtiyat qoyun.
Bəzi yazılar üçün (məsələn, gürcü/tay) baza keglini 1 px artırın.

15) iGaming xüsusiyyətləri

Turnir/bonus kartları: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA və şərtlər - daimi zonada.
Liderlər/reytinqlər: sticky-papaq/birinci sütun; XS - stacked rejimi; ədədlər tək genişliklidir.
Ödəniş formaları: XS - tək sütunlu; MD - 2 sütun (sahə + izahat).
Məsuliyyətli bildirişlər (18 +, limitlər, risklər): hər zaman bütün fasilə nöqtələrində görünür, AAA kontrastı, «hoverdə gizlədilir».

16) Anti-nümunələr

Şəbəkə/sütun əvəzinə blokların sabit eni.
«Hər pikseldə dönüş nöqtəsi»: çox sayda media sorğusu → xaos.
Sınıq ritm: heç bir səbəb olmadan qonşu bölmələrdə müxtəlif gutter/sahələr.
Qıvrımsız şəkildəki tənqidi mətn.
Yalnız hover ilə mövcud olan məzmun (tak əlçatmaz).
Uzun siyahılarda layout xüsusiyyətlərinin animasiyası.

17) QA-çek siyahısı

Şəbəkə və konteynerlər

• Sütunlar və qutular fasilə nöqtələrinə uyğundur; konteynerlər mərkəzləşdirilmişdir.
• Komponentlər düzgün «axır» 1 → 2 → 3 sütunlar qırılmadan.

Mətbəə

• Sətir uzunluğu 45-80; 'clamp ()' vasitəsilə fluid-peggy.
• Mətnin kontrastı hər iki mövzuda WCAG-a uyğundur.

Şəkillər

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

Giriş və A11y

• Klaviatura naviqasiyası; ': focus-visible' görünür.
• TAC hover alternativ; klik zonaları ≥ 44 × 44.
• 'prefers-reduced-motion' dəstəklənir.

Performans

• Yalnız 'transform/opacity' animasiya; ağır təsiri məhduddur.
• Kritik CSS/JS effektiv yüklənir.

18) Dizayn sistemində sənədləşmə

«Responsive & Breakpoints»: breakpoint, konteyner, dinamik və gutter cədvəli.
«Container Queries»: adaptiv komponentlərin nümunələri.
«Fluid Type»: 'clamp ()' düsturları və şkalaların əvvəlcədən qurulması.
«Naviqasiya nümunələri»: XS/SM/MD/LG/XL variantları.
Qısa kliplər və CLS/LCP qiymətləri ilə «Do/Don 't».

Qısa xülasə

Adaptasiya bir strategiyadır, xaotik media sorğuları toplusu deyil. Cihazın məzmununa və analitikasına güvənin, media sorğularını yetkin şəbəkə və konteyner sorğuları ilə birləşdirin, 'clamp ()' tipoqrafiya üçün tətbiq edin, şəkilləri və performansı idarə edin, giriş və A11y üçün bütün üsulları saxlayın. Beləliklə, interfeys hər hansı bir ekranda proqnozlaşdırıla bilən, sürətli və eyni dərəcədə rahat qalır.