Moslashuvchan dizayn va sinish nuqtalari

1) Qonunning

1. Kontent-first: maketlar «ommabop» kengliklardan emas, balki vazifa va tarkibdan tuziladi.
2. Mobile-first: Biz sodda versiyadan boshlaymiz va kengligi/kirish imkoniyatlari oshgan sari murakkablashtiramiz.
3. Progressive enhancement: bazaviy UX JS/animatsiyasiz ishlaydi; yaxshilashlar shartlarga muvofiq ulanadi.
4. Consistency: bir xil namunalar - barcha breykpindlarda bir xil xulq-atvor.
5. Performance-aware: tasvirlar, to’rlar va skriptlar og’irligi va murakkabligiga ko’ra moslashtiriladi.

2) Sinish nuqtalari (breykpointlar)

Haqiqiy qurilmalar ma’lumotlari va pattern (ustunlar/navigatsiya/bosmaxona) o’zgarishi bo’yicha tanlaymiz.

Tavsiya etilgan to’plam (ko’rsatkich)

• Breykpint faqat tuzilishi o’zgarganda kiritiladi (masalan, kartochkalarning 1 → 2 ustunlari, sidbar paydo bo’lishi).
• Komponent ichidagi lokal tanaffuslar (konteyner soʻrovlari) mumkin.

3) Konteyner so’rovlari vs media so’rovlar

’@media’: media soʻrovlari butun sahifaning layout qismini oʻzgartirganda (navigatsiya, shablon).
Konteyner’@container’: kartochka/vidjet o’zining kengligi bo’yicha moslanishi kerak (komponent sahifadan mustaqil).

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

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

Bet freymi uchun media + komponentlar uchun konteynerlardan foydalaning.

4) Bosmaxona: fluid + qadamlar

’clamp’ va breykpindlar boʻyicha qadamlarni birlashtiring.

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

• Satr uzunligi 45-80 belgi (saydbarlarda 36-60).
• Kattalik qadamlari 4/8-pt; line-height breykpindlar bo’yicha barqaror.

5) To’rlar va modullar

Seksiyalar darajasida - CSS Grid (ustunlar, viloyatlar); ichida - Flex.
Komponentlarning balandligi (masalan, 40/48/56 px).
Biz 2 ta zichlik presetiga egamiz: Comfort (o’qish/dashbordlar) va Compact (jadvallar/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) Tasvirlar va 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; }

Orqa fon uchun’image-set ()’va lazy-loading.
Rasmdagi matn - faqat ploshkada/overleyda; kontrast ≥ AA.

7) Navigatsiya va responsive-patternlar

XS/SM: bottom-nav yoki hamburger, sezilarli CTA; yashirin qidiruv yuqorida ochiladi.
MD: persistent-sidebar/mega-menu paydo bo’ladi.
LG/XL: ikkita navigatsiya darajasi, tez filtrlar, non parchalari.

Xulq-atvor: elementlar betartiblik bilan harakat qilmaydi - har doim oldindan aytib berilgan sxemalardan biri.

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

• «Faqat hoverda» tanqidiy kontent yo’q.
• Bosish zonalari: ≥ 44 × 44 (mob.) , ≥ 32 × 32 (desktop).
• Klaviatura barcha breykpindlarda saqlanadi.

9) Xavfsiz zonalar va tizimli kesmalar

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) Qorong’i/yorqin mavzular va kontrast

Mavzular breykpindlardan mustaqil: kontrastning maqsadlari hamma joyda bir xil.
XS da «kislotali» urg’ulardan qochamiz; qorong’i fonda havolalarning yorqinligini oshiramiz.
’prefers-color-scheme’ va qo’lda o’tkazgichni qo’llab-quvvatlash.

11) Unumdorlik

Tanqidiy CSS - inline yoki’media =’print ’/preload strategiyasi orqali; JS yuklanmoqda.
Uzun ro’yxatlardagi layout-og’ir animatsiyalardan qoching; ’opacity/transform’ ni jonlantiring.
Rasmlar/vidjetlarni dangasa yuklash; spinnerlar o’rniga skeleton.
Oʻnlab kartochkalarda «ogʻir» soyalarni/filtrlarni cheklang.

12) Dizayn-tizim tokenlari (misol)

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) Komponentlar amaliyoti (konteyner breykalari)

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-tur (chap tomondagi yorliq, oʻngdagi qiymat, bloklar).
• SM +: gorizontal skroll faqat ustunlar ortiqcha bo’lganda, shlyapa/birinchi ustunni tuzatamiz.
• Sonlar - tabular-nums, o’nlik raqamlar bo’yicha tekislash.

14) Mahalliylashtirish va RTL

’dir = «rtl»’ +’: dir (rtl)’ikonkalarni/oʻqlarni/margin-larni oynalash uchun.
Tarjimalar satr uzunligini 20-30% ga oshirishi mumkin - zaxirani qo’ying.
Baʼzi yozuvlar uchun (masalan, gruzin/tay) bazaviy keglni 1 px ga oshiring.

15) iGaming xususiyatlari

Turnirlar/bonuslar kartochkalari: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA va shartlar - doimiy zonada.
Yetakchilar/reytinglar: sticky-shapka/birinchi ustun; XS - stacked rejimi; sonlar monoshirinidir.
To’lov shakllari: XS - bir ustunli; MD - 2 ustunga (maydon + tushuntirish).
Mas’uliyatli bildirishnomalar (18 +, limitlar, xavflar): har doim barcha breykpindlarda ko’rinadi, AAA kontrasti, «hoverda yashirinmagan».

16) Anti-patternlar

To’r/ustunlar o’rniga bloklarning belgilangan kengliklari.
«Har bir piksel uchun burilish nuqtasi»: juda ko’p media so’rovlar → xaos.
Buzilgan ritm: qo’shni seksiyalardagi turli gutter/maydonlar sababsiz.
Rasmdagi tanqidiy matn plashkasiz.
Faqat hoverda mavjud boʻlgan kontent (tachga yetib boʻlmaydi).
Uzun roʻyxatlardagi layout xossalari animatsiyalari.

17) QA-chek-varaq

To’r va konteynerlar

• Ustunlar va gutter breykpindlarga mos keladi; konteynerlar markazlashtirilgan.
• Komponentlar 1 → 2 → 3 ustunlarini sinmasdan to’g’ri «oqadi».

Bosmaxona

• Satr uzunligi 45-80; ’clamp ()’ orqali fluid-kegllar.
• Matnning kontrasti ikkala mavzuda ham WCAGga mos keladi.

Rasmlar

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

Kirish va A11y

• Klaviatura navigatsiyasi;’: focus-visible’koʻrinadi.
• Tashish uchun muqobil hover; 44 ≥ 44 × bosish zonalari.
• ’prefers-reduced-motion’qoʻllab-quvvatlandi.

Unumdorlik

• Faqat’transform/opacity’animatsiya qilinadi; og’ir ta’sirlar cheklangan.
• Tanqidiy CSS/JS samarali yuklanadi.

18) Dizayn-tizimdagi hujjatlar

«Responsive & Breakpoints»: breykpindlar, konteynyerlar, ustunlar va gutter jadvali.
«Container Queries»: moslashuvchan komponentlar misollari.
«Fluid Type»:’clamp ()’formulasi va shkalalarni oldindan tuzish.
«Navigatsiya namunalari»: XS/SM/MD/LG/XL variantlari.
«Do/Don’t» qisqa kliplar va CLS/LCP qiymatlari bilan.

Qisqacha xulosa

Moslashuvchanlik - bu xaotik media so’rovlar to’plami emas, balki strategiya. Qurilma kontenti va tahliliga tayaning, media soʻrovlarni yetuk toʻr va konteyner soʻrovlari bilan birlashtiring, bosmaxona uchun’clamp ()’ni qoʻllang, rasmlar va ishlash qobiliyatini nazorat qiling, kirish va A11y barcha usullarini qoʻllab-quvvatlang. Shunday qilib, interfeys har qanday ekranda oldindan aytib bo’lmaydigan, tez va bir xil darajada qulay bo’lib qoladi.