CSS responsive, font-size?

جرب استخدام الـ em أو rem وبدلاً من تغيير القياسات لكل عنصر على حدا باستخدام الـ media query، تقوم بتغيير الـ font-size للأب فقط.

حيث أن em هي قياس الـ font-size للعنصر الأب المباشر، بينما الـ rem هي قياس الـ font-size للعنصر الـ root للصفحة.

هناك العديد من الطرق لجعل حجم الخط يتناسب مع أحجام الشاشات المختلفة، ولكن الطريقة الأكثر شيوعًا هي استخدام وحدة الـ "rem" بدلاً من وحدة الـ "px" أو "em".

تعتمد وحدة "rem" على حجم الخط الأساسي الذي تم تعيينه على الجسم (body) في صفحة الويب، وبالتالي فإن حجم الخط يتناسب مع حجم الشاشة بشكل أكثر ديناميكية.

لتحديد حجم الخط باستخدام وحدة "rem"، يمكنك استخدام القيمة النسبية لحجم الخط بدلاً من القيمة الثابتة في الوحدات الأخرى. مثلاً، إذا كان حجم الخط الأساسي (font-size) ضمن الوسم (body) 16 بكسل، فيمكنك استخدام القيمة "1.5rem" بدلاً من "24px" لتعيين حجم الخط في عنصر معين.

بالإضافة إلى ذلك، يمكن استخدام الـ CSS media queries لتغيير حجم الخط بناءً على حجم الشاشة، على سبيل المثال، يمكنك تعيين حجم الخط ليكون أكبر على الشاشات الكبيرة وأصغر على الشاشات الصغيرة.

هناك أيضًا العديد من المكتبات والأدوات المتاحة على الويب التي تمكنك من جعل حجم الخط يتناسب مع أحجام الشاشات بشكل أسهل، مثل Bootstrap و Google's Material Design وغيرها من مكتبات CSS التي تسهّل عليك التحكم بالخطوط والتنسيقات.

هناك عدة طرق يمكن استخدامها لجعل حجم الخطوط متجاوبًا مع الصفحة بطريقة تلقائية وأكثر دقة.

لكن أفضلها في رأي استخدام rem ولكن بطريقة مختلفة حيث يجب القيام بالتالي:

 يتم تعيين حجم الخط الأساسي (الخط الجذري) إلى 62.5% بدلاً من 100%.

html {
  /* 62.5% of 16px browser font size is 10px */
  font-size: 62.5%;
}

.some-element {
  /* 1.2 * 10px = 12px */
  font-size: 1.2rem;
}

يعني ذلك أن حجم الخط الأساسي يكون يساوي 10 بدلاً من 16 بكسل (الحجم الافتراضي لحجم الخط على متصفحات الويب). وذلك لأن 16 يقسم على 2.5 يساوي 6.4، و 6.4 بدلاً من 10 سيعني أن الأحجام المستخدمة بعد ذلك ستكون أسهل للتحكم بها بشكل نسبي، حيث ستستخدم نسبة بين الحجم الجديد والحجم الأساسي بنسبة نسبية سهلة الاستخدام مثل rem أو em أو بالنسبة المئوية. ويتيح ذلك أيضًا تعديل حجم الخط بشكل سريع وسهل.

أمثلة:

body {
  font-size: 1.6rem;
}
h1 {
  font-size: 4.8rem;
}

وهكذا بالنسبة لبقية التصميم، وستجد أن الأمر أصبح أسهل من ذي قبل في إنشاء التصاميم المتجاوبة.

يمكنك استخدام الدالة clamp حيث تعتبر تغنيك عن استخدام ال media query كالمثال التالي

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

هنا الدالة clamp يحتوي على 3 معاملات .

• الأول هو الحد الأدنى المسموح به لحجم الخط.
• الثالث هو الحد الأقصى المسموح به لحجم الخط.
• الوسيطة الثانية هي حجم الخط الذي تريده دائمًا. يجب أن تكون وحدتها نسبية (vw ، vh ، ch) وليست مطلقة (أي ليست بكسل ، مم ، نقطة). الوحدة النسبية ستجعلها تغير حجمها مع تغيير أحجام الشاشة.

نعم، هناك عدة طرق يمكن استخدامها لجعل حجم الخط متجاوباً مع الصفحة. ولكن يجب الانتباه إلى أن تحقيق التوافقية الكاملة لحجم الخط بين جميع الأجهزة والشاشات مستحيل تماماً.

إليك بعض الطرق التي يمكن استخدامها:

1- استخدام الوحدات النسبية: تستخدم الوحدات النسبية (مثل em و rem) بدلاً من الوحدات المطلقة (مثل px)، حيث تعتمد الوحدات النسبية على حجم الخط في العنصر الأساسي (عادةً هو الـ body)، وليس على حجم الشاشة.

2- استخدام مجموعة من الوحدات: يمكن استخدام مجموعة من الوحدات معًا، مثل "min" و "max"، وذلك باستخدام الدالة calc()، لتحديد الحجم الأدنى والأقصى للخط. مثال: font-size: calc(16px + 1vw - 1rem);

3- استخدام الدالة clamp(): تسمح الدالة clamp() بتحديد نطاق لحجم الخط، مع تحديد حد أدنى وأقصى للحجم، وحدة قياس ثابتة. مثال: font-size: clamp(16px, 1vw, 24px);

4- استخدام مكتبات CSS: يمكن استخدام مكتبات CSS مثل "FitText" أو "TypeButter"، التي توفر حلول جاهزة لجعل الخط متجاوباً مع الشاشة.

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