Հարմարվողական դիզայն և կոտրվածքի կետեր

1) Սկզբունքներ

1. Բովանդակություն-first: մակետները կառուցված են առաջադրանքներից և բովանդակությունից, ոչ թե «հայտնի» լայնություններից։

2. Mobile-first: Մենք սկսում ենք խիստ պարզ տարբերակից և բարդացնում ենք, երբ աճում ենք լայնությունը/մուտքային հնարավորությունները։

3. Progressive enhancae: հիմնական UX-ն աշխատում է առանց JS/անիմացիաների; բարելավումները միացված են պայմաններով։

4. Consistency: նույն patternes - նույն վարքագիծը բոլոր breekpoints-ում։

5. Performant-a.ru: Պատկերները, ցանցերը և ջութակները հարմարվում են քաշին և բարդությանը։

2) Կոտրվածքի կետերը (brekpoints)

Մենք ընտրում ենք իրական սարքերի տվյալները և փոխելով պաթերոնը (կոլոն/նավարկություն/տպագրություն)։

Չարտոնված հավաքածու (ուղեցույց)

Կանոնները

Breikpoint-ը ներկայացնում ենք միայն կառուցվածքը փոխելիս (օրինակ, 1-2 քարտերի սյուներ, sidbar)։

Թույլատրելի է տեղական ընդմիջումները բաղադրիչի ներսում (բեռնարկղային հարցումներ)։

3) Բեռնարկղային հարցումներ

Երբ լրատվամիջոցները «@ media», փոխվում է ամբողջ էջի layout (ռոտացիա, ձևանմուշ)։

Երբ բեռնարկղերը '@ www.ainer': Քարտը/տեսողությունը պետք է կառուցվի իր հասանելի լայնությամբ (բաղադրիչը առանց էջի)։

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

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

Օգտագործեք միացում 'մեդիա, էջ + բեռնարկղեր բաղադրիչների համար։

4) Տպագրություն ՝ fluid + քայլեր

Համատեղեք 'clamp () "և քայլերը brekpointam-ի վրա։

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 են։ 108-height կայուն է brekpoints-ով։

5) Ցանցեր և մոդուլներ

Հատվածների մակարդակում CSS Grid (սյունակներ, տարածքներ); ներսում Flex է։

Բաղադրիչների բարձրությունները կարճ են (օրինակ ՝ 40/48/56 px)։

Մենք ունենք խտության երկու ճնշում ՝ Comfort (կարդալ/dashbords) և 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) Պատկերներ և լրատվամիջոցներ

Օգտագործեք 'www.cset '/' sizes "և խտության ավտոմատ ընտրություն

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="Описание">

Գրանցեք համամասնությունները CLS-ից խուսափելու համար

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

Ֆոնների համար '«image-2019 ()» և lazy-loading։

Պատկերների վրա տեքստը միայն բոցավառման/հանգույցի վրա է։ հակադրություն AA։

7) Միգրացիան և responsive-patterns

XS/SM: bottium-nav կամ hamburger, նկատելի CTA; թաքնված որոնումը բացահայտվում է վերևում։

MD 'հայտնվում է persistent-sidebar/mega-mant։

LG/XL 'նավիգացիայի երկու մակարդակ, արագ ֆիլտրեր, հացահատիկ։

Վարքագիծը 'տարրերը չեն «տեղափոխվում» քաոսային, միշտ նախանշված սխեմաներից մեկն է։

8) Շահագործում ՝ hover/touch/keyboard/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» -ում։

Կլիկի գոտիները ՝ 3544 3544 (1922) , No. 32 No. 32 (desktop)։

Ստեղնաշարն աջակցվում է բոլոր բրեյքպոինտների վրա։

9) Ապահով գոտիներ և անտառներ

Բջջային հաշվի ենք առնում safe-area

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-ում խուսափում ենք «թթվային» ակցենտներից։ ավելացնում ենք հղումների պայծառությունը մութ ֆոնի վրա։

Աջակցություն 'wwww.fers-color-scheme "և ձեռքով անջատիչ։

11) Արտադրողականությունը

Քննադատական CSS-ը inme կամ "media =" print "ռազմավարություն է։ JS-ը վերբեռնված է։

Խուսափեք layout ծանր անիմացիաներից երկար ցուցակներում։ Անիմիրուզեք 'opacity/transform>։

Ծույլ է նկարների/տեսակների բեռնումը։ skeleton 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 շերտը

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) Բաղադրիչների (բեռնարկղային ընդմիջումներ)

Ապրանքի քարտը/2019

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) "սրբապատկերների/սլաքի/margin-s հացահատիկի համար։

Թարգմանությունները կարող են ավելացնել գծերի երկարությունը 20-30 տոկոսով, տեղադրեք պահեստը։

Որոշ գրությունների համար (օրինակ, վրացական/թայերեն) ավելացրեք հիմնական կեգլը 1 px-ում։

15) iGaming հատկությունները

Կիսագունդների/բոնուսների քարտերը ՝ 3 հազար N (LG), 2 հազար N (MD), 1 հազար N (SM/XS); CTA-ն և պայմանները մշտական գոտում են։

Առաջնորդներ/վարկանիշներ ՝ sticky-գլխարկ/առաջին սյունակը; XS-ի վրա stacked ռեժիմը; թվերը միապաղաղ են։

Հիբրիդային ձևերը 'XS-ում' միապաղաղ։ MD-ում 2 սյունակ է (դաշտը + բացատրություն)։

Պատասխանատու ծանուցումներ (18 +, լիմիտներ, ռիսկեր), միշտ տեսանելի են բոլոր breikpoints, AAA հակադրություն, առանց «թաքնված է hover»։

16) Anti-patterna

Բլոկների ֆիքսված լայնությունը ցանցի/զանգերի փոխարեն։

«Յուրաքանչյուր պիքսել վերափոխման կետը», չափից շատ ԶԼՄ-ների հետազոտություններ, քաոս։

Կոտրված ռիթմը 'տարբեր gutter/դաշտեր հարևան հատվածներում առանց պատճառի։

Քննադատական տեքստը պատկերում է առանց կրակի։

Բովանդակությունը, որը հասանելի է միայն hover-ով (տնակում անհասանելի)։

Երկար ցուցակների վրա layout հատկությունների անիմացիաները։

17) QA-chek-թերթ

Ցանցեր և բեռնարկղեր

• Սյունակները և gutter համապատասխանում են brekpointam; բեռնարկղերը կենտրոնացված են։
• Բաղադրիչները ճիշտ «հոսում են» 1-2-3 սյունակներ առանց կոտրելու։

Տպագրություն

• Տողի երկարությունը 45-80; fluid-kegley 'clamp ()'։
• Տեքստի հակադրությունը համապատասխանում է WCAG-ին երկու թեմաներում։

Պատկերներ

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

Շահագործումը և A1y

• Ստեղնաշարի լուծումը; <: focus-visible> տեսանելի է։
• Hover այլընտրանքը տնակում; կլիկայի գոտին 44 3544 է։
• [wwww.fers-reduced-motion "-ը աջակցվում է։

Արտադրողականությունը

• Անիմացվում են միայն «transform/opacity»; ծանր ազդեցությունները սահմանափակ են։
• Քննադատական CSS/JS-ն արդյունավետ է։

18) Մոսկվա դիզայնի համակարգում

«Responsive & Breakpoinae» ՝ Breakpoints, բեռնարկղեր, զանգեր և gutter։

«Intainer Queries» -ը հարմարվողական բաղադրիչների օրինակներ են։

«Fluid Type»: բանաձևերը «clamp» () և նախագծված սանդղակը։

«Նավիգացիայի Patterns»: XS/SM/MD/LG/XL տարբերակներ։

«Do/Don 't» կարճ տեսահոլովակներով և CLS/LCP արժեքներով։

Ռուսական ռեզյումե

Հարմարվողականությունը ռազմավարություն է, ոչ թե քաոսային լրատվամիջոցների։ Ապավինեք սարքերի բովանդակությանը և վերլուծությանը, տրամադրեք հասունացած ցանցով և բեռնարկղով, օգտագործեք «clamp» () տպագրության համար, վերահսկեք պատկերներն ու արտադրողականությունը, աջակցեք բոլոր եղանակներին և A1y-ին։ Այսպիսով, ինտերֆեյսը մնում է կանխատեսելի, արագ և հավասարապես հարմար ցանկացած էկրանին։