Нуқтаҳои тарроҳӣ ва шикастани мутобиқшавӣ

1) Принсипҳо

1. Мундариҷа-аввал: Тарҳҳо аз вазифаҳо ва мундариҷа сохта мешаванд, на аз паҳнои "маъмул".
2. Аввалан мобилӣ: мо бо варианти қатъии оддӣ оғоз мекунем ва бо афзудани имкониятҳои паҳно/вуруд мураккабтар мешавем.
3. Такмили прогрессивӣ: UX асосӣ бе JS/аниматсияҳо кор мекунад; такмилҳо мувофиқи шароит пайваст карда мешаванд.
4. Мутобиқат: шакли якхела - рафтори якхела дар ҳама нуқтаҳо.
5. Огоҳӣ аз иҷрои: Тасвирҳо, торҳо ва скриптҳо дар вазн ва мураккабӣ мутобиқ мешаванд.

2) Нуқтаҳои шикастагӣ (нуқтаҳо)

Мо мувофиқи маълумоти дастгоҳҳои воқеӣ ва бо тағир додани намуна (сутунҳо/навигатсия/типография) интихоб мекунем.

Маҷмӯи тавсияшуда (нуқтаи истинод)

• Мо нуқтаи бозистро танҳо ҳангоми тағир додани сохтор ворид мекунем (масалан, 1 → 2 сутунҳои кортҳо, намуди панели паҳлӯ).
• Танаффусҳои маҳаллӣ дар дохили як ҷузъ (дархостҳои контейнер) иҷозат дода мешаванд.

3) Дархостҳои контейнер ва дархостҳои ВАО

Ҳангоми пурсиши ВАО '@ media': тарҳбандии тамоми саҳифаро тағир медиҳад (навигатсия, қолаб).
Ҳангоми контейнер '@ container': корт/виҷет бояд ба паҳнои мавҷудаи он мутобиқ карда шавад (ҷузъ новобаста аз саҳифа).

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

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

Барои чорчӯбаи саҳифа + контейнерҳоро барои ҷузъҳо истифода баред.

4) Типография: моеъ + қадамҳо

Якҷоя кардани 'фишор ()' ва қадамҳо дар нуқтаҳо.

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

• Дарозии хат 45-80 аломат (паҳлӯи 36-60).
• Қадамҳои бузургӣ зарбҳои 4/8-pt мебошанд; баландии хат дар нуқтаҳо устувор аст.

5) Торҳо ва модулҳо

Дар сатҳи бахш - CSS Grid (сутунҳо, минтақаҳо); дарун - Flex.
Баландии компонентҳо мултипликатсияҳои ибтидоӣ мебошанд (масалан, 40/48/56 px).
Мо 2 пешнамоиши зичӣ дорем: Тасаллӣ (хониш/панели панел) ва паймон (ҷадвалҳо/про).

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) Тасвирҳо ва ВАО

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

Барои заминаҳо - 'маҷмӯи тасвирҳо ()' ва боркунии танбал.
Матн дар тасвир - танҳо дар табақ/сарпӯш; муқобил ≥ А.А.

7) Намунаҳои навигатсионӣ ва посухгӯӣ

XS/SM: поёни-нав ё гамбургер, CTA назаррас; ҷустуҷӯи пинҳонӣ дар боло васеъ мешавад.
MD: менюи доимӣ-паҳлӯ/мега-меню пайдо мешавад.
LG/XL: ду сатҳи паймоиш, филтрҳои зуд, нонрезаҳои нон.

Рафтор: унсурҳо ба таври тасодуфӣ "ҳаракат намекунанд" - ҳамеша яке аз схемаҳои қаблан тавсифшуда.

8) Вуруд: hover/touch/клавиатура

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

• Не мундариҷаи интиқодӣ "танҳо дар hover".
• Минтақаҳои клик: ≥ 44 × 44 (мобилӣ), ≥ 32 × 32 (мизи корӣ).
• Клавиатура дар ҳамаи нуқтаҳо дастгирӣ карда мешавад.

9) Минтақаҳои бехатар ва буридани система

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) Мавзӯъҳои торик/сабук ва контраст

Мавзӯъҳо новобаста аз нуқтаҳо мебошанд: ҳадафҳои контраст дар ҳама ҷо якхелаанд.
Дар XS, аз аксенти "кислота" канорагирӣ кунед; сабукии пайвандҳоро дар заминаи торик зиёд кунед.
Дастгирии 'prefers-color-scheme' ва калиди дастӣ.

11) Иҷро

CSS интиқодӣ - дохилӣ ё тавассути 'media = "print" '/стратегияи пешакӣ; Сарбории JS ба таъхир афтод.
Нагузоред, ки аниматсияҳои вазнин дар рӯйхатҳои дароз; animate 'opacity/transform'.
Боркунии танбалии тасвирҳо/виджетҳо; скелет ба ҷои spinners.
Маҳдуд кардани сояҳо/филтрҳои "вазнин" дар даҳҳо кортҳо.

12) Нишонаҳои системаи тарроҳӣ (мисол)

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) Семинари компонентҳо (танаффуси контейнер)

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: намоиши часпонидашуда (нишона дар тарафи чап, арзиш дар тарафи рост, дар блокҳо).
• SM +: ҳаракати уфуқӣ танҳо бо зиёда аз сутунҳо, сутуни ҳадди аққал/аввалро ислоҳ кунед.
• Ададҳо - ҷадвалбандиҳо, ададҳои даҳӣ.

14) Маҳаллисозӣ ва RTL

'dir = "rtl"' + ': dir (rtl)' ба оинаи нишонаҳо/тирҳо/ҳошияҳо.
Тарҷумаҳо метавонанд дарозии сатрҳоро 20-30% зиёд кунанд - саҳмияҳоро гузоред.
Барои баъзе навиштаҳо (масалан, Гурҷистон/Таиланд), андозаи пойгоҳро ба 1 px зиёд кунед.

15) Хусусиятҳои IGaming

Кортҳои мусобиқа/бонус: шабакаи 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA ва шароит - дар минтақаи доимӣ.
Роҳбарон/рейтингҳо: кулоҳи часпанда/сутуни аввал; дар XS - ҳолати часпонидашуда; рақамҳо якранг мебошанд.
Шаклҳои пардохт: дар XS - як-сутун; дар MD - 2 сутун (майдон + шарҳ).
Огоҳиҳои масъулиятнок (18 +, маҳдудиятҳо, хатарҳо): ҳамеша дар ҳама нуқтаҳо намоён аст, контрасти AAA, бидуни "дар hover пинҳон".

16) Анти-намунаҳо

Бари блоки собит ба ҷои шабака/сутунҳо.
"Нуқтаи шикастани як пиксел": аз ҳад зиёд дархостҳои ВАО → бетартибӣ.
Ритми шикаста: қубурҳои гуногун/чоҳҳо дар қисматҳои ҳамсоя бе ягон сабаб.
Матни интиқодӣ дар тасвири бе мурдан.
Мундариҷа танҳо бо hover дастрас аст (ламс дастнорас аст).
Аниматсияҳои хусусиятҳои тарроҳӣ дар рӯйхатҳои дароз.

17) Рӯйхати назоратии QA

Фикр ва контейнерҳо

• Сутунҳо ва қубурҳо ба нуқтаҳо мувофиқанд; зарфҳо марказонида шудаанд.
• Компонентҳо дуруст "ҷорист" 1 → 2 → 3 сутун бидуни шикастан.

Типография

• Дарозии хат 45-80; пинҳони моеъ тавассути 'фишор ()'.
• Муқоисаи матн ба WCAG дар ҳарду мавзӯъ мувофиқат мекунад.

Тасвирҳо

• Эсть 'srcset/андоза', 'ҷанба-таносуб' и танбалӣ; нест CLS.

Вуруд ва A11y

• Паймоиши клавиатура; ': фокус намоён' намоён.
• алтернатива ба ламс; минтақаҳои ≥ 44 × 44 -ро пахш кунед.
• 'дастгирии-кам-кам' дастгирӣ карда мешавад.

Иҷро

• Танҳо 'табдил/шаффофият' мутаҳаррик аст; таъсири шадид маҳдуд аст.
• Борҳои интиқодӣ CSS/JS самаранок.

18) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

"Ҷавоб ва нуқтаҳо": ҷадвали нуқтаҳо, контейнерҳо, сутунҳо ва қубурҳо.
Дархостҳои контейнер: намунаҳои ҷузъҳои мутобиқшавӣ.
"Навъи моеъ": 'фишор ()' формулаҳо ва миқёси пешакӣ.
"Намунаҳои навигатсионӣ": вариантҳои XS/SM/MD/LG/XL.
"Иҷро кунед/накунед" бо клипҳои кӯтоҳ ва арзишҳои CLS/LCP.

Хулосаи мухтасар

Мутобиқшавӣ стратегия аст, на маҷмӯи дархостҳои хаотикии ВАО. Ба таҳлили мундариҷа ва дастгоҳ такя кунед, дархостҳои васоити ахбори оммаро бо дархостҳои шабакаи баркамол ва контейнерҳо муттаҳид кунед, барои типография, тасвирҳои назоратӣ ва иҷро истифода баред ва ҳама усулҳои вуруд ва A11y дастгирӣ кунед. Ҳамин тавр, интерфейс пешгӯишаванда, зуд ва баробар дар ҳама гуна экран боқӣ мемонад.