التصميم التكيفي ونقاط الكسر

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) الشبكات والوحدات

على مستوى الأقسام - شبكة خدمات الضمان الاجتماعي (أعمدة، مناطق) ؛ في الداخل - فليكس.
ارتفاعات المكونات هي مضاعفات لخط الأساس (على سبيل المثال 40/48/56 px).
لدينا تجهيزات مسبقة لكثافة 2: الراحة (القراءة/لوحات القيادة) و 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; }

للخلفيات - «مجموعة الصور ()» والتحميل الكسول.
النص في الصورة - فقط على اللوحة/التراكب ؛ ≥ AA.

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

• لا يوجد محتوى نقدي «فقط في التحليق».
• انقر فوق المناطق: ≥ 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» والتبديل اليدوي.

11) الأداء

CSS critical - inline or via 'media = «print »/preload strategy; تأخر تحميل JS.
تجنب الرسوم المتحركة الثقيلة في القوائم الطويلة ؛ تحريك «التعتيم/التحول».
التحميل الكسول للصور/الأدوات ؛ الهيكل العظمي بدلاً من المغازل.
حد من الظلال/المرشحات «الثقيلة» على عشرات البطاقات.

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، دون «مخبأة في تحوم».

16) الأنماط المضادة

عروض الكتلة الثابتة بدلاً من الشبكة/الأعمدة.
«نقطة الكسر لكل بكسل»: الكثير من طلبات وسائل الإعلام → الفوضى.
الإيقاع المكسور: مزراب/ملاعب مختلفة في الأقسام المجاورة دون سبب.
نص نقدي في صورة بدون موت.
المحتوى متاح فقط مع التحليق (لا يمكن الوصول إليه).
رسوم متحركة لخصائص التخطيط في القوائم الطويلة.

17) قائمة QA المرجعية

الشبكة والحاويات

• تتطابق الأعمدة والمزاريب مع نقاط التوقف ؛ الحاويات مركزة.
• المكونات بشكل صحيح «تدفق» 1→2→3 العمود دون كسر.

الطباعة

• طول الخط 45-80 ؛ دبابيس السوائل من خلال «مشبك ()».
• تباين النص يطابق WCAG في كلا الموضوعين.

صور

• Есть 'srcset/sizes', 'abspect-ratio' и lazy-loading; لا يوجد نظام CLS.

المدخلات A11y

• ملاحة لوحة المفاتيح ؛ «: التركيز مرئي» مرئي.
• البديل لللمس ؛ انقر فوق المناطق ≥ 44 × 44.
• دعم «يفضل الحركة المخفضة».

الأداء

• يتم تحريك «التحويل/التعتيم» فقط ؛ الآثار الشديدة محدودة.
• أحمال CSS/JS الحرجة بكفاءة.

18) التوثيق في نظام التصميم

«نقاط الاستجابة والكسر»: جدول نقاط الاستراحة والحاويات والأعمدة والمزاريب.
استفسارات الحاويات: أمثلة على المكونات التكيفية.
«نوع السوائل»: «مشبك ()» صيغ ومقياس مسبقة.
«أنماط الملاحة»: متغيرات XS/SM/MD/LG/XL.
«افعل/لا تفعل» مع مقاطع قصيرة وقيم CLS/LCP.

موجز

القدرة على التكيف هي استراتيجية وليست مجموعة من الاستفسارات الإعلامية الفوضوية. الاعتماد على تحليلات المحتوى والأجهزة، ودمج استفسارات الوسائط مع استفسارات الشبكة والحاويات الناضجة، واستخدام «clamp ()» للطباعة والتحكم في الصور والأداء، ودعم جميع طرق الإدخال A11y. لذلك تظل الواجهة متوقعة وسريعة ومريحة بنفس القدر على أي شاشة.