استفسارات بخصوص ال responsive design في CSS

الطريقة التي قمت بها بالتعامل مع التصميم المتجاوب تعد مقبولة ولكن هناك بعض النقاط التي يجب مراعاتها لضمان أفضل الممارسات وتجربة مستخدم متميزة:

• استخدام vw و rem: استخدام vw لتحديد حجم الخط للعنصر الجذر (root) يعتبر مناسبًا، حيث يعتمد حجم الخط على عرض الشاشة. استخدام rem للعناصر الأخرى يجعلها تعتمد على حجم الخط المحدد للعنصر الجذر.
• استخدام Media Queries: تغيير حجم الخط للعنصر الجذر وبعض التعديلات الأخرى باستخدام Media Queries هو خطوة جيدة لضمان أن التصميم يتكيف بشكل جيد مع مختلف أحجام الشاشات. يمكنك تعديل أي جوانب أخرى من التصميم أيضًا كالهوامش والأبعاد بناءً على الاحتياجات.

النقاط التي يجب مراعاتها:

• القراءة والنصوص: تأكد من أن النصوص مقروءة بشكل جيد على جميع الأحجام، حيث يجب أن تكون كافية للقراءة دون تكبير.

بعض المشاكل التي تتواجهها تلك الطريقة :

• لن يتمكن الأشخاص الذين يستخدمون ميزة التكبير/التصغير في متصفحهم أو يقومون بزيادة حجم خط النظام من القيام بذلك حيث أن vw لا تحترم تلك القيم فمن الممكن أن الشخص صاحب الهاتف أو الشاشة الصغيرة لديه مشكلة في القراءة ويقوم بتكبير الخط على هاتفه ولذلك فإن vw ستظهر الخط صغيرا بناء على عرض الشاشة وليس على قيمة الخط الذى يستخدمها المستخدم والتي تحترمها وحدة قياس rem و em .

هل هناك طريقة أفضل؟

• نعم من الممكن إستخدام الدالة calc() للحسابات الرياضية في الأبعاد واحجام الخطوط إذا أردت حيب 

باختصار، الطريقة التي اتبعتها تعد مناسبة ولكنها ستجعل حجم الخط يعتمد على القيم التي وضعتها بناء على عرض الشاشة وليست القيمة التي يستخدمها المستخدم.

الطريقة التي اتبعتها تعتبر من أفضل الممارسات للتصاميم متجاوبة في بداية بناء الموقع وكما أخبرك محم د في التعليق السابق فإنه لتخطي المشكلات التي تظهر يمكنك استخدام الدالة calc كالتالي

html { font-size: calc(1em + 1vw); }

كما أنه يفضل اتباع النصائح في الإجابات التالية

بخصوص أفضل الممارسات، فتلك ليست الطريقة المناسبة، الإعتماد على حجم الشاشة لتعيين الخط أمر يسبب مشاكل غير متوقعة بطبيعة الحال حيث لا تستطيع التحكم في ذلك بشكل كامل، فلا يوجد حد أدنى أو حد أعلى لمدى حجم الخط والأمر يظهر بشكل جلي في الشاشات الصغيرة و الشاشات الكبيرة، أيضًا لو قمت بعمل تقريب للصفحة فلن يزداد حجم الخط في حال كان مساوي لـ 80vw مثلاً وستزداد النصوص التي أقل من ذلك.

بالتالي الطريقة الحديثة هي استخدام دالة clamp والصيغة الخاصة بها كالتالي:

font-size: clamp(MIN, VALUE, MAX);

• MIN: الحد الأدنى لحجم الخط.
• VALUE: القيمة المفضلة لحجم الخط والتي ستتغير حسب حجم الشاشة، أي القيمة التي نريدها للخط.
• MAX: الحد الأقصى لحجم الخط.

وهناك أداة توفر لك القيم للنصوص المختلفة في موقعك، أي تقوم بتوليد القيم لك بناءًا على مساحة العرض وحجم الخط الذي تريده، وهي:

• utopia.fyi
• https://modern-fluid-typography.vercel.app/

وهناك حل آخر أُفضله، وهو إنشاء TYPOGRAPHY SYSTEM، بحيث يكون هناك نظام للخطوط متبع في كامل التصميم.

أولاً عليك تحديد حجم الخط الأساسي للموقع ليصبح 10px، ونفعل ذلك بوضع القيمة التالية:

html {
  font-size: 62.5%;
}

62.5% من حجم الخط الأساسي أو الإفتراضي وهو 16px تصبح القيمة 10px.

وذلك لتسهيل استخدام rem فحاليًا 1.8rem تعني 18px وبالتالي الاستخدام أصبح أسهل من أجل التجاوبية.

بعد ذلك عليك تحديد مقاسات الخطوط في الـ  TYPOGRAPHY SYSTEM وأحجامها font weight وأيضًا الـ line height  وفي النهاية ستجد أنّ لديك نظام يشبه التالي:

*** 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98


- font weight

default: 400
medium: 500
semi-bold:600
bold: 700

- line height 

default: 1.5
medium: 
default paragraph: 1.5

الآن قم بإنشاء متغيرات مخصصة تستطيع استخدامها في كامل التصميم كالتالي:

:root {
  --font-family: 'Noto Kufi Arabic', sans-serif;
  --font-color--white: #ebedf8;
  --font-color: #322143;
  --font-size: 1.8rem;
  --font-size-small: 1.4rem;
  --font-size-medium: 1.6rem;
  --font-weight--medium: 500;
  --font-weight--semi: 600;
  --line-height: 1.5;

}