التصميم السريع الاستجابة

أفضل الممارسات عمومًا

• استخدِم طلبات البحث @container لإنشاء تنسيقات متجاوبة مستندة إلى المكوّنات تتكيّف مع حجم الحاوية الرئيسية بدلاً من إطار العرض. لمزيد من التفاصيل، يُرجى الاطّلاع على التصميم المتوافق مع حجم الشاشة.
• استخدِم وحدات إطار العرض الديناميكية (dvh وdvw) بدلاً من vh/vw لمنع حدوث مشاكل في التنسيق عند ظهور أو اختفاء عناصر واجهة المستخدم في متصفّح الأجهزة الجوّالة (مثل أشرطة العناوين).
• استخدِم aspect-ratio لعناصر الوسائط (مثل <img> و<video>) لحجز مساحة أثناء التحميل ومنع متغيّرات التصميم التراكمية (CLS).

للاطّلاع على آليات التنسيق وراء واجهة المستخدم السريعة الاستجابة (نموذج flexbox والشبكة ووحدات طلبات البحث عن الحاويات ووحدات إطار العرض)، يُرجى الاطّلاع على تنسيقات CSS والتصميم السريع الاستجابة.

أسلوب الخط المتجاوب

• يُفضَّل الجمع بين الوحدات المرتبطة بإطار العرض والوحدات المرتبطة بالخط في clamp() لأحجام الخطوط التي تتغيّر مع حجم إطار العرض مع ضمان بقائها ضمن النطاق المطلوب. على سبيل المثال، clamp(2rem, 1rem + 5vw, 4rem). اضبط نسبة الوحدات المرتبطة بإطار العرض والوحدات المرتبطة بالخط للتحكّم في سرعة تغيير حجم الخط.
• لا تستخدِم vw وحدها لحجم الخط بدون clamp()، لأنّها قد تؤدي إلى تكبير النص أو تصغيره بشكل مفرط على الشاشات الكبيرة أو الصغيرة جدًا.

لتغيير حجم الخط والتباعد مع الحاوية بدلاً من إطار العرض، يُرجى الاطّلاع على تغيير الحجم المرن.