عندما تقوم ببناء صفحة ويب ، يوصي معظم المحترفين بأن تقوم بتحديد حجم الخطوط (وفي الواقع ، كل شيء) باستخدام قياس نسبي مثل ems أو exs أو نسب مئوية أو pixels. هذا لأنك لا تعرف بالفعل جميع الطرق المختلفة التي قد يعرضها شخص ما للمحتوى الخاص بك. وإذا كنت تستخدم مقياسًا مطلقًا (بوصة أو سنتيمترًا أو ملليمترًا أو نقطًا أو بيكاس) فقد يؤثر ذلك على عرض الصفحة أو قراءتها في أجهزة مختلفة. ويوصي W3C أن تستخدم نظام الإدارة البيئية للأحجام.
لكن كيف كبير هو م؟
وفقًا لـ W3C an em:
"تساوي القيمة المحسوبة لخاصية" حجم الخط "للعنصر الذي تستخدم عليه. الاستثناء هو عندما يحدث" em "في قيمة خاصية" font-size "نفسها ، وفي هذه الحالة تشير إلى بحجم خط العنصر الرئيسي. "
وبعبارة أخرى ، ليس لدى EMS حجم مطلق. يأخذون قيم حجمهم بناء على مكان وجودهم. بالنسبة لمعظم مصممي الويب ، هذا يعني أنهم في مستعرض ويب ، لذا فإن الخط الذي يبلغ طوله 1 دقيقة هو بنفس حجم الخط الافتراضي لهذا المتصفح تمامًا.
ولكن كم يبلغ الطول هو الحجم الافتراضي؟ لا توجد طريقة لتكون مؤكدة بنسبة 100٪ ، حيث يمكن للعملاء تغيير حجم الخط الافتراضي في المتصفحات ، ولكن نظرًا لأن معظم الأشخاص لا يمكنك افتراض أن معظم المتصفحات لها حجم خط افتراضي يبلغ 16 بكسل. لذلك معظم الوقت 1em = 16 بكسل.
فكر في Pixels ، استخدم Ems for the Measure
بمجرد أن تعرف أن حجم الخط الافتراضي هو 16 بكسل ، يمكنك عندئذ استخدام نظام الإدارة البيئية للسماح لعملائك بتغيير حجم الصفحة بسهولة ولكن التفكير في وحدات البكسل لأحجام الخط الخاصة بك. لنفترض أن لديك بنية تغيير الحجم مثل هذا:
- العنوان 1 - 20 بكسل
- العنوان 2 - 18 بكسل
- العنوان 3 - 16 بكسل
- النص الرئيسي - 14 بكسل
- النص الفرعي - 12 بكسل
- الهوامش - 10 بكسل
يمكنك تعريفهم بهذه الطريقة باستخدام وحدات البكسل للقياس ، ولكن لن يتمكن أي شخص يستخدم IE 6 و 7 من تغيير حجم صفحتك بشكل جيد. لذا يجب عليك تحويل الأحجام إلى نظام الإدارة البيئية ، وهذه مجرد مسألة بعض الرياضيات:
- العنوان 1 - 1.25em (16 × 1.25 = 20)
- العنوان 2 - 1.125em (16 × 1.125 = 18)
- العنوان 3 - 1em (1em = 16 بكسل)
- النص الرئيسي - 0.875em (16 × 0.875 = 14)
- Sub text - 0.75em (16 x 0.75 = 12)
- الحواشي السفلية - 0.625 م (16 × 0.625 = 10)
لا تنس الوراثة!
ولكن هذا ليس كل ما يوجد لنظام الإدارة البيئية. الشيء الآخر الذي يجب أن تتذكره هو أنهم يأخذون حجم الوالد. لذلك إذا كان لديك عناصر متداخلة بأحجام مختلفة ، فقد ينتهي بك الأمر بخط أصغر أو أكبر مما تتوقع.
على سبيل المثال ، قد يكون لديك ورقة أنماط مثل هذه:
ص {font-size: 0.875em؛ }.footnote {font-size: 0.625em؛ }
سيؤدي ذلك إلى استخدام الخطوط التي تبلغ 14 بكسل و 10 بكسل للنص الرئيسي والحواشي السفلية على التوالي. ولكن إذا وضعت حاشية سفلية داخل فقرة ، فقد ينتهي بك الأمر إلى نص بحجم 8.75 بكسل بدلاً من 10 بكسل. جربها بنفسك ، ضع هذا CSS أعلاه و HTML التالي في مستند:
هذا الخط هو 14px أو 0.875 ems في الارتفاع.تحتوي هذه الفقرة على حاشية سفلية فيها.في حين أن هذا مجرد فقرة حاشية سفلية.
يصعب قراءة نص الحاشية السفلية في 10 بكسل ، وهو غير مقروء تقريبًا عند 8.75 بكسل.
لذلك ، عندما تستخدم نظام الإدارة البيئية ، يجب أن تكون مدركًا لأحجام الأشياء الرئيسية ، أو ستنتهي ببعض العناصر ذات الحجم الفردي على صفحتك.
