عندما تقوم بإنشاء صفحة ويب ، يوصي معظم المحترفين بأن تقوم بتغيير حجم الخطوط (وفي الواقع ، كل شيء) بمقياس نسبي مثل ems أو exs أو النسب المئوية أو وحدات البكسل. هذا لأنك لا تعرف حقًا كل الطرق المختلفة التي قد يشاهد بها شخص ما المحتوى الخاص بك. وإذا كنت تستخدم مقياسًا مطلقًا (البوصات ، أو السنتيمترات ، أو المليمترات ، أو النقاط ، أو البيكا) ، فقد يؤثر ذلك على عرض الصفحة أو قابلية قراءتها في أجهزة مختلفة. و توصي W3C أنك تستخدم ems للأحجام.
ولكن ما هو حجم م؟
وفقا ل W3C م:
"يساوي القيمة المحسوبة لخاصية" حجم الخط "للعنصر الذي يتم استخدامه فيه. الاستثناء هو عندما يحدث "em" في قيمة خاصية "حجم الخط" نفسها ، وفي هذه الحالة يشير إلى حجم خط العنصر الأصلي. "
بمعنى آخر ، لا تملك ems حجمًا مطلقًا. يأخذون قيم حجمهم بناءً على مكان وجودهم. بالنسبة لمعظم مصممي المواقع الإلكترونية، هذا يعني أنهم في مستعرض ويب ، لذا فإن الخط الذي يبلغ طوله 1em هو نفس حجم الخط الافتراضي لهذا المستعرض.
ولكن ما هو ارتفاع الحجم الافتراضي؟ لا توجد وسيلة لتكون متأكدًا بنسبة 100٪ ، حيث يمكن للعملاء تغيير ملفات حجم الخط الافتراضي
في متصفحاتهم ، ولكن نظرًا لأن معظم الأشخاص لا يفعلون ذلك ، يمكنك افتراض أن حجم الخط الافتراضي لمعظم المتصفحات هو 16 بكسل. لذلك معظم الوقت 1em = 16 بكسل.فكر بالبكسل ، استخدم ems للقياس
بمجرد أن تعرف أن حجم الخط الافتراضي هو 16 بكسل ، يمكنك بعد ذلك استخدام ems للسماح لعملائك بتغيير حجم الصفحة بسهولة ولكن فكر في ذلك بكسل لأحجام الخطوط الخاصة بك. لنفترض أن لديك بنية تحجيم مثل هذا:
- العنوان 1 - 20 بكسل
- العنوان 2 - 18 بكسل
- العنوان 3-16 بكسل
- النص الرئيسي - 14 بكسل
- نص فرعي - 12 بكسل
- الحواشي - 10 بكسل
يمكنك تحديدها بهذه الطريقة باستخدام وحدات البكسل للقياس ، ولكن بعد ذلك لن يتمكن أي شخص يستخدم IE 6 و 7 من تغيير حجم صفحتك بشكل جيد. لذلك يجب عليك تحويل الأحجام إلى ems وهذه مجرد مسألة حسابية:
- العنوان 1 - 1.25em (16 × 1.25 = 20)
- العنوان 2 - 1.125em (16 × 1.125 = 18)
- العنوان 3 - 1em (1em = 16 بكسل)
- نص رئيسي - 0.875em (16 × 0.875 = 14)
- نص فرعي - 0.75em (16 × 0.75 = 12)
- الحواشي - 0.625em (16 × 0.625 = 10)
لا تنسى الميراث!
لكن هذا ليس كل ما في الأمر. الشيء الآخر الذي يجب أن تتذكره هو أنها تأخذ حجم الوالد. لذلك إذا كان لديك عناصر متداخلة ذات أحجام خطوط مختلفة ، فقد ينتهي بك الأمر بخط أصغر أو أكبر بكثير مما تتوقع.
على سبيل المثال ، قد يكون لديك ورقة أنماط مثل هذا:
قد ينتج عن ذلك خطوط 14 بكسل و 10 بكسل للنص الرئيسي والحواشي السفلية على التوالي. ولكن إذا وضعت حاشية سفلية داخل فقرة ، فقد ينتهي بك الأمر بنص يبلغ حجمه 8.75 بكسل بدلاً من 10 بكسل. جربها بنفسك ، ضع ما سبق CSS و HTML التالي في مستند:
لذلك ، عندما تستخدم ems ، يجب أن تكون مدركًا تمامًا لأحجام الكائنات الأصلية ، أو سينتهي بك الأمر ببعض العناصر ذات الأحجام الفردية على صفحتك.