Adaptiw dizaýn we döwük nokatlar

1) Ýörelgeler

1. Mazmun-first: maketler "meşhur" giňliklerden däl-de, wezipelerden we mazmundan gurlupdyr.
2. Mobile-first: Biz gaty ýönekeý wariantdan başlaýarys we giriş giňligi/mümkinçilikleri artanda çylşyrymlaşdyrýarys.
3. Progressive enhancement: esasy UX JS/animasiýasyz işleýär; gowulaşmalar şertler boýunça birikdirilýär.
4. Consistency: birmeňzeş nagyşlar - ähli arakesmelerde birmeňzeş hereket.
5. Performance-aware: şekiller, torlar we skriptlar agramyna we çylşyrymlylygyna görä uýgunlaşdyrylýar.

2) Döwülen nokatlar (breýkpointler)

Hakyky enjamlaryň maglumatlaryna görä we patterni (sütünleri/nawigasiýalary/çaphanalary) çalyşmak boýunça saýlaýarys.

Maslahat berlen toplum

• Breýkpoint diňe gurluşyň üýtgemegi bilen girizilýär (mysal üçin, kartoçkalaryň 1 → 2 sütünleri, sidbaryň peýda bolmagy).
• Komponentiň içinde lokal arakesmelere ýol berilýär (konteýner soraglary).

3) Konteýner haýyşlary vs media soraglary

Haçan-da media soraglary '@media': tutuş sahypanyň layout (nawigasiýa, şablon) üýtgeýär.
Konteýner '@container' bolanda: kartoçka/widget elýeterli giňligi boýunça uýgunlaşdyrylmalydyr (komponent sahypadan garaşsyz).

css
/ Include container rating for unit/
.widget { container-type: inline-size; }

/ Inside - we adapt the card to the width of the container/
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

Sahypanyň çarçuwasy üçin media + komponentler üçin konteýnerler.

4) Çaphana: fluid + ädimler

'clamp ()' we arakesme ädimlerini birleşdiriň.

css
:root {
/ Basic fluid headset/
--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; }/fine tuning on LG +/
}

• Setiriň uzynlygy 45-80 belgi (saidbarlarda 36-60).
• Ululyk ädimleri 4/8-pt; line-height aralyk nokatlar boýunça durnukly.

5) Torlar we modullar

Bölümleriň derejesinde - CSS Grid (sütünler, ýerler); içinde - Flex.
Komponentleriň beýikligi baseline (mysal üçin, 40/48/56 px).
Bizde 2 dykyzlyk preseti bar: Comfort (okamak/daşbordlar) we Compact (tablisalar/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) Suratlar we metbugat

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 = "Description">

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

Fon üçin - 'image-set ()' we lazy-loading.
Suratdaky tekst - diňe çarçuwada/overleýde; AA ≥ kontrast.

7) Nawigasiýa we responsive-patternler

XS/SM: bottom-nav ýa-da hamburger, görnükli CTA; gizlin gözleg ýokarsynda açylýar.
MD: persistent-sidebar/mega-menu peýda bolýar.
LG/XL: iki derejeli nawigasiýa, çalt süzgüçler, çörek bölekleri.

Özüni alyp barşy: elementler bulam-bujar "hereket etmeýär" - hemişe öňünden beýan edilen shemalaryň biri.

8) Giriş: hover/touch/keyboard

css
@ media (hover: hover) and (pointer: fine) {/hover effects/}
@ media (hover: none), (pointer: coarse) {/touch-patterns/}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• "Diňe hower" -de möhüm mazmun ýok.
• Basylýan zolaklar: ≥ 44 × 44 (mob.) , ≥ 32 × 32 (desktop).
• Klawiatura ähli arakesmelerde saklanýar.

9) Howpsuz zolaklar we ulgamlaýyn kesikler

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) Garaňky/açyk mowzuklar we kontrast

Mowzuklar arakesmelerden garaşsyz: kontrastyň maksatlary hemme ýerde birmeňzeş.
XS-de "kislotaly" aksentlerden gaça durýarys; garaňky fonda baglanyşyklaryň ýagtylygyny ýokarlandyrýarys.
'prefers-color-scheme' we el açaryny goldamak.

11) Öndürijilik

Möhüm CSS - inline ýa-da 'media = "print" '/preload strategiýasy; JS gijikdirilýär.
Uzyn sanawlarda agyr animasiýalardan gaça duruň; 'opacity/transform' animasiýasyny ediň.
Suratlary/widgetleri ýaltalyk bilen ýüklemek; spinner ýerine skeleton.
Onlarça kartoçkada "agyr" kölegeleri/süzgüçleri çäklendiriň.

12) Dizaýn-ulgamyň bellikleri (mysal)

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) Komponentleriň praktikumy (konteýner arakesmeleri)

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-görnüş (çep, sag, blok).
• SM +: gorizontal skroll diňe sütünler köp bolanda, şlýapany/birinji sütüni düzedýäris.
• Sanlar - tabular-nums, onluk boýunça tekizlemek.

14) Lokalizasiýa we RTL

'dir = "rtl"' + ': dir (rtl)' nyşanlary/oklary/margin-leri aýna etmek üçin.
Terjimeler setirleriň uzynlygyny 20-30% ýokarlandyryp biler - ätiýaçlyk goýuň.
Käbir ýazgylar üçin (mysal üçin gürji/taý) esasy keglini 1 px artdyryň.

15) iGaming aýratynlyklary

Ýaryşlaryň/bonuslaryň kartoçkalary: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA we şertler - hemişelik zonada.
Liderler/reýtingler: sticky-şapka/birinji sütün; XS - stacked-re; sanlar birmeňzeş.
Töleg görnüşleri: XS - bir sütünli; MD - 2 sütün (meýdan + düşündiriş).
Jogapkär habarnamalar (18 +, çäkler, töwekgelçilikler): ähli arakesmelerde hemişe görünýär, AAA kontrast, "howerde gizlenýär".

16) Anti-patternler

Tor/sütünleriň ýerine bloklaryň kesgitlenen ini.
"Her piksel üçin öwrüm nokady": gaty köp media soragy → bulam-bujarlyk.
Döwülen ritm: goňşy bölümlerde sebäpsiz dürli gutter/meýdançalar.
Şekildäki möhüm tekst.
Diňe hover bilen elýeterli bolan mazmun (taç üçin elýeterli däl).
Uzyn sanawlarda layout-häsiýet animasiýalary.

17) QA-çek-sanawy

Tor we konteýner

• Sütünler we gutter arakesmelere laýyk gelýär; konteýnerler merkezleşdirildi.
• Komponentler 1 → 2 → 3 sütünlerini döwmezden dogry "akýar".

Tipografiýa

• Setiriň uzynlygy 45-80; 'clamp ()' arkaly fluid-kegller.
• Tekstiň tapawudy iki mowzukdaky WCAG-a laýyk gelýär.

Şekiller

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

Giriş we A11y

• Klawiatura nawigasiýasy; ': focus-visible' görünýär.
• Taç üçin hower alternatiwasy; basmagyň zolaklary ≥ 44 × 44.
• 'prefers-reduced-motion' goldanýar.

Öndürijilik

• Diňe 'transform/opacity' animasiýa edilýär; agyr täsirleri çäklidir.
• Möhüm CSS/JS netijeli ýüklenýär.

18) Dizaýn-ulgamdaky resminamalar

"Responsive & Breakpoints": arakesme nokatlarynyň, konteýnerleriň, sütünleriň we gutterleriň tablisasy.
"Kontainer Queries": uýgunlaşdyrylan komponentleriň mysallary.
"Fluid Type": 'clamp ()' formulasy.
"Nawigasiýa patternleri": XS/SM/MD/LG/XL-wariantlar.
CLS/LCP klipleri we gymmatlyklary bolan "Do/Don 't".

Gysgaça gysgaça

Uýgunlaşma, bulam-bujar media soraglarynyň toplumy däl-de, strategiýadyr. Enjam mazmunyna we analitikasyna bil baglaň, media soraglaryny ýetişen tor we konteýner soraglary bilen birleşdiriň, çaphana üçin 'clamp ()' ulanyň, şekilleri we öndürijiligi dolandyryň, giriş we A11y ähli usullaryny saklaň. Şonuň üçin interfeýs islendik ekranda öňünden aýdyp boljak, çalt we deň derejede amatly bolup galýar.