Адаптивдүү дизайн жана сынык чекиттери

1) Принциптер

1. Контент-first: макеттер "популярдуу" туурасы эмес, милдеттери жана мазмуну менен курулган.
2. Mobile-first: Биз катуу жөнөкөй параметр менен башталат жана туурасы/киргизүү мүмкүнчүлүктөрү өскөн сайын татаалдашат.
3. Progressive enhancement: негизги UX JS/Animation жок иштейт; жакшыртуу шарттары боюнча кошулат.
4. Consistency: бирдей үлгүлөр - бардык брейк-пункттарында бирдей жүрүм-турум.
5. Аткаруу-aware: сүрөттөр, торлор жана скрипттер салмагы жана татаалдыгы боюнча ылайыкташтырылган.

2) Сынык чекиттери (брейкпоинттер)

Чыныгы түзмөктөрдүн маалыматтары жана үлгүнү алмаштыруу боюнча тандайбыз (колонкалар/навигация/типография).

Сунушталган топтому (көрсөтмө)

• Брейкпоинт түзүмү өзгөргөндө гана киргизилет (мисалы, 1 → 2 карта тилкеси, сайдбардын пайда болушу).
• Компоненттин ичиндеги жергиликтүү брейктерге жол берилет (контейнердик суроолор).

3) Контейнер өтүнүчтөр vs медиа суроолор

Медиа суроолор '@media' болгондо: бүт беттин катмары өзгөрөт (навигация, шаблон).
Качан контейнердик '@container': карта/виджет өзүнүн жеткиликтүү туурасы боюнча ыңгайлашуусу керек (компонент барактан көз каранды эмес).

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

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

Байланыш колдонуңуз: беттин кадр медиа + компоненттер үчүн контейнерлер.

4) типография: fluid + кадамдар

айкалыштыруу 'clamp ()' жана 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+ /
}

• Саптын узундугу 45-80 белги (36-60 сайдбарларда).
• Чоңдуктардын кадамдары 4/8-pt; line-height туруктуу breakpoint.

5) тор жана модулдары

Секциялардын деңгээлинде - CSS Grid (колонкалар, аймактар); ичинде - Flex.
Компоненттердин бийиктиги baseline эселенген (мисалы, 40/48/56 px).
Бизде 2 тыгыздык пресети бар: Comfort (окуу/дашборддор) жана Compact (таблицалар/про).

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

Фон үчүн - 'image-set ()' жана lazy-loading.
Сүрөттөгү текст - плашкада/оверледе гана; контраст ≥ AA.

7) Навигация жана responsive-паттерндер

XS/SM: bottom-nav же гамбургер, көрүнүктүү CTA; жашыруун издөө жогору ачылат.
MD: persistent-sidebar/mega-menu пайда болот.
LG/XL: эки деңгээл багыттоо, тез чыпкалар, нан сыныктары.

Жүрүм-турум: элементтер башаламан "көчүп" эмес, - ар дайым алдын ала сүрөттөлгөн схемалардын бири.

8) киргизүү: 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; }

• Эч кандай критикалык мазмун "гана 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 - inline же аркылуу 'media = "print" '/preload стратегиясы; JS кийинкиге калтырылды.
узун тизмелер боюнча layout-оор Animation качуу; жандандыруу 'opacity/transform'.
Сүрөттөрдү/виджеттерди жүктөө; skeleton ордуна spinner.
Ондогон карталарда "оор" көлөкөлөрдү/фильтрлерди чектеңиз.

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) Practicum компоненттери (контейнер брейк)

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-көрүнүш (белги сол, оң маани, блоктор).
• SM +: горизонталдык скролл гана ашыкча мамычалар, капкак/биринчи тилкесин бекитүү.
• Сандар - tabular-nums, ондук боюнча тегиздөө.

14) Локализация жана RTL

'dir = "rtl"' + ': dir (rtl)' сөлөкөттөрдү/жебелерди/маргиналдарды чагылдыруу үчүн.
Которуулар саптардын узундугун 20-30% га көбөйтө алат - резерв.
кээ бир жазуу үчүн (мисалы, грузин/тай) 1 PX үчүн базалык кегл көбөйтүүгө.

15) iGaming өзгөчөлүктөрү

Турнирлердин/бонустардын карталары: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) тор; CTA жана шарттары - туруктуу зонада.
Лидерлер/рейтинги: sticky-калпак/биринчи тилкеси; XS - stacked режими; сандар моношириндүү.
Төлөм формалары: XS - бир тилкелүү; MD - 2 тилке (талаа + түшүндүрмө).
Жоопкерчиликтүү билдирүүлөр (18 +, лимиттер, тобокелдиктер): бардык брейк-пункттарда дайыма көрүнүп турат, AAA контрасты, "hover катылган" жок.

16) Анти-үлгүлөрү

тор/колонка ордуна блоктордун белгиленген туурасы.
"Ар бир пикселге бурулуш чекити": өтө көп медиа суроолор → башаламандык.
сынган ритм: ар кандай gutter/себепсиз кошуна бөлүмдөрүндө талаалар.
Сүрөттөгү сынчыл текст.
Ховер менен гана жеткиликтүү мазмун (тачка жеткис).
узун тизмелер боюнча layout-касиеттерин Animation.

17) QA-чек тизмеси

тор жана контейнерлер

• Колонкалар жана gutter брейкпоинттерге туура келет; контейнерлер борборлоштурулган.
• компоненттери туура "агып" 1 → 2 → 3 талкаланбастан колонкалар.

Типография

• Саптын узундугу 45-80; fluid-кегли аркылуу 'clamp ()'.
• Тексттин карама-каршылыгы эки темада тең WCAGге туура келет.

Сүрөттөр

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

Киргизүү жана A11y

• Клавиатура менен навигация; ': focus-visible' көрүнүп турат.
• Тач боюнча hover альтернатива; басуу зоналары ≥ 44 × 44.
• 'prefers-reduced-motion' колдоого алынган.

Өндүрүмдүүлүк

• Жандуу гана 'transform/opacity'; оор таасирлери чектелген.
• Критикалык CSS/JS натыйжалуу жүктөлөт.

18) Дизайн системасында документтер

"Responsive & Breakpoints": breakpoints стол, контейнерлер, мамычалар жана gutter.
"Container Queries": адаптивдик компоненттердин мисалдары.
"Fluid Type": 'clamp ()' формуласы жана шкала алдын ала түзүлүшү.
"Багыттоо үлгүлөрү": XS/SM/MD/LG/XL-параметрлери.
"Do/Don 't" кыска клиптер жана CLS/LCP маанилери менен.

Кыскача резюме

Адаптация - бул стратегия, башаламан медиа суроолордун жыйындысы эмес. Түзмөктөрдүн мазмунуна жана аналитикасына таянуу, медиа суроо-талаптарды жетилген тор жана контейнер суроо-талаптары менен айкалыштыруу, 'clamp ()' басып чыгаруу үчүн колдонуу, сүрөттөрдү жана өндүрүмдүүлүктү көзөмөлдөө, киргизүү жана A11y бардык жолдорун сактоо. Ошентип, интерфейс ар кандай экранда алдын ала, тез жана бирдей ыңгайлуу бойдон калууда.