עיצוב אדפטיבי ונקודות שבר

1) עקרונות

1. תוכן-ראשון: פריסות בנויות ממשימות ותוכן, לא מרוחב ”פופולרי”.
2. מובייל-ראשון: אנחנו מתחילים עם אפשרות פשוטה קפדנית ומסתבכים יותר ככל שיכולות הקלט/רוחב גדלות.
3. שיפור מתקדם: UX בסיסי עובד ללא JS/אנימציות; שיפורים מחוברים בהתאם לתנאים.
4. עקביות: אותם דפוסים - התנהגות זהה על כל נקודות השבירה.
5. ביצועי מודע: תמונות, רשתות, ותסריטים להסתגל במשקל ומורכבות.

2) נקודות שבר (נקודות שבירה)

אנו בוחרים על פי הנתונים של התקנים אמיתיים ועל ידי שינוי התבנית (עמודות/ניווט/טיפוגרפיה).

הגדרה מומלצת (נקודת ייחוס)

• אנו נכנסים לנקודת שבירה רק כאשר אנו משנים את המבנה (לדוגמה, 1 2 עמודות הקלפים, המראה של סרגל צד).
• הפסקות מקומיות בתוך רכיב (בקשות מכולה) מותרות.

3) בקשות מכולה נגד בקשות מדיה

כאשר שאילתות מדיה ”@ מדיה”: משנה את פריסת העמוד כולו (ניווט, תבנית).
כאשר המכל '@ continer': הכרטיס/ווידג 'ט חייב להתאים לרוחב הזמין שלו (הרכיב אינו תלוי בדף).

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 (עמודות, אזורים); בפנים - גמישות.
גבהים רכיבים הם כפולות של קו בסיס (למשל: 40/48/56 px).
יש לנו 2 צפיפות מראש: Comport (קריאה/לוח מחוונים) ו ־ 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; }

לרקע - ”תמונה-סט ()” וטעינה עצלה.
טקסט בתמונה - רק על הצלחת/כיסוי; בניגוד לאלכוהוליסטים אנונימיים.

7) ניווט ודפוסי תגובה

XS/SM: ניווט תחתון או המבורגר, CTA בולט; חיפוש חבוי מתרחב למעלה.
MD: מתמיד-צד/מגה-תפריט מופיע.
LG/XL: שתי רמות של ניווט, מסננים מהירים, פירורי לחם.

התנהגות: יסודות אינם ”זזים” באופן אקראי - תמיד אחת המזימות שתוארו קודם לכן.

8) קלט: ריחוף/מגע/מקלדת

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

• אין תוכן קריטי ”רק ברחף”.
• אזורי לחיצה: winde44 × 44 (נייד), mind 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, להימנע מבטאים ”חומצה”; להגביר את קלילות הקישורים על רקע אפל.
תמיכה ב ”מעדיף ערכת צבעים” ומתג ידני.

11) ביצועים

Critical CSS - inline או vy 'media = "print'/pretload strategy; ג 'יי-אס מתעכב.
הימנע פריסת אנימציות כבדות ברשימות ארוכות; אנימציה 'אופייה/טרנספורמציה'.
טעינה עצלה של תמונות/וידג 'טים; שלד במקום ספינרים.
להגביל צללים ”כבדים ”/מסננים על עשרות כרטיסים.

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); סי-טי-איי ותנאים באזור קבוע.
מנהיגים/רייטינג: כובע דביק/טור ראשון; במצב XS; מספרים הם חד-ספרתיים.
טופסי תשלום: על XS - עמודה אחת; על MD - 2 עמודות (הסבר שדה +).
הודעות אחראיות (18 +, גבולות, סיכונים): תמיד ניתן לראות בכל נקודות השבירה, ניגוד AAA, ללא ”חבוי ברחף”.

16) אנטי דפוסים

רוחב בלוקים קבוע במקום רשת/עמודות.
”נקודת שבירה לפיקסל”: יותר מדי בקשות מדיה תוהו ובוהו.
קצב שבור: ביוב/הגשות שונות בחלקים הסמוכים ללא סיבה.
טקסט קריטי בתמונה בלי למות.
תוכן זמין רק עם ריחוף (מגע בלתי ניתן להשגה).
אנימציות של מאפייני פריסה ברשימות ארוכות.

17) רשימת QA

רשת ומיכלים

[ ] עמודות וביבים מתאימים לנקודות שבירה; מכולות מרוכזות.

[ ] הרכיבים ”זורמים” בצורה נכונה. 1.

טיפוגרפיות

[ קו ] באורך 45-80; סיכות נוזלים דרך 'מלחציים () ".

[ ] טקסט תואם WCAG בשני הנושאים.

תמונות

[ ] Azizens' srcset/direction "," היבט-יחס-עצלות-טעינה "; אין סי-אל-אס.

קלט ו A11y

[ ] ניווט מקלדת; מיקוד גלוי לעין.

[ ] מרחף אלטרנטיבה למגע; לחצו על אזורים 44 × 44.

[ ] 'מעדיף-מופחת תנועה' נתמך.

ביצועים

[ רק ] transformation/officity "מונפשת; השפעות חמורות מוגבלות.

[ ] CSS/JS קריטי טעון ביעילות.

18) תיעוד במערכת התכנון

”Responsive & Breakpoints”: שולחן של נקודות שבירה, מיכלים, עמודים ותעלות ביוב.
שאילתות מיכל: דוגמאות של רכיבים אדפטיביים.
סוג נוזל: 'מלחציים ()' נוסחאות וסקאלה מקדימה.
”תבניות ניווט”: XS/SM/MD/LG/XL.
”Do/Don 't” עם קטעים קצרים וערכי CLS/LCP.

סיכום קצר

הסתגלות היא אסטרטגיה, לא סדרה של שאילתות מדיה כאוטיות. הסתמכו על תכנים וניתוחי התקנים, שילבו שאילתות מדיה עם שאילתות רשת ומיכלים בוגרים, השתמשו במלחציים () לטיפוגרפיה, שלטו בתמונות ובביצועים ותומכים בכל שיטות הקלט A11y. אז הממשק נשאר צפוי, מהיר ונוח באותה מידה על כל מסך.