Px مقابل. إم مقابل. Rem: أي وحدة CSS يجب أن تستخدمها؟

ستتعلم بعض وحدات CSS لتخصيص حجم خط النص عند إنشاء صفحات الويب. هناك العديد من الوحدات مثل pt و pc و ex وما إلى ذلك ، ولكن في معظم الحالات يجب أن تركز على الوحدات الثلاث الأكثر شيوعًا: px و em و rem. كثير من المطورين لا يفهمون عادة ما هي الاختلافات بين هذه الوحدات ؛ لذلك ، فيما يلي شرح مفصل لهذه الوحدات.

قبل المتابعة ، لاحظ أن هناك نوعين من أطوال الوحدات: مطلق و نسبي.

أطوال مطلقة

وحدات الطول المطلقة ثابتة ، وسيظهر الطول المعبر عنه في أي منها بهذا الحجم بالضبط.

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

أطوال النسبية

تحدد وحدات الطول النسبية طولًا متعلقًا بخاصية طول أخرى. وحدات الطول النسبية مقياس أفضل بين وسط التقديم المختلفة.

1. Px (بكسل)

من المحتمل أن تكون Pixel هي الوحدة الأكثر استخدامًا في CSS وتحظى بشعبية كبيرة عندما يتعلق الأمر بتعيين حجم خط النص على صفحات الويب. يتم تعريف البكسل الواحد (1 بكسل) على أنه 1/96 من البوصة في وسائط الطباعة.

ومع ذلك ، على شاشات الكمبيوتر ، لا ترتبط عادةً بالقياسات الفعلية مثل السنتيمتر والبوصة كما تعتقد ؛ تم تعريفها على أنها صغيرة ولكنها مرئية. ما يعتبر مرئيًا يعتمد على الجهاز.

تحتوي الأجهزة المختلفة على عدد مختلف من وحدات البكسل لكل بوصة على شاشاتها ، وهو ما يُعرف بكثافة البكسل. إذا استخدمت عدد وحدات البكسل الفعلية على شاشة الجهاز لتحديد حجم المحتوى على هذا الجهاز ، فستواجه مشكلة في جعل الأشياء تبدو متشابهة عبر الشاشات من جميع الأحجام.

وهنا يأتي دور نسبة البكسل في الجهاز. إنها في الأساس مجرد طريقة لحساب مقدار المساحة التي سيشغلها بكسل CSS (1 بكسل) على شاشة الجهاز والتي ستمكنه من الظهور بنفس الحجم عند مقارنته بجهاز آخر.

فيما يلي مثال: -

<فئة div ="حاوية">
<شعبة>
<h1>هذه فقرة</h1>
<ص>
 Lorem ipsum، dolor sit amet consectetur adipisicing elit.
 إعادة النظر في حالة التعرض للخطأ في الحقيقة
 omnis في! Officiis praesentium officia ، nemo veniam dueatur
 nostrum sunt al Liquid ipsam، corporis quaerat. لوريم إيبسوم دولور
 الجلوس amet consectetur adipisicing elit. هيك quam beatae voluptatibus
 امكانية احتمالية وجود افتراضات مميّزة عن التهاب السائل السائل ، autem
 في أولام يتعلق الأمر بالجسد بحكم طبيعته.
</ ص>
</div>
</div>

.حاوية {
 العرض: 100٪؛
 الارتفاع: 100 فولت
 العرض: فليكس ؛
 تبرير المحتوى: مركز ؛
 محاذاة العناصر: مركز ؛
}
.حاويةشعبة {
 أقصى عرض: 500 بكسل ؛
 الحشو: 5 بكسل 20 بكسل ؛
 الحدود: 1 بكسل رمادي صلب ؛
 نصف قطر الحدود: 10 بكسل ؛
}
ص {
 حجم الخط: 16 بكسل ؛
}

انتاج

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

لاحظ كيف أن النص في كلا المربعين له نفس الحجم ، وهذا أساسًا هو كيفية عمل البكسل. يساعد محتوى الويب (وليس النص فقط) في الظهور بنفس الحجم عبر الأجهزة.

2. م (م)

حصلت وحدة em على اسمها من الحرف الكبير "M" (em) لأن معظم وحدات CSS تأتي من الطباعة. يستخدم حجم الخط الحالي للعنصر الأصل كأساس له. يمكن استخدامه لتوسيع أو تصغير حجم الخط لعنصر بناءً على حجم الخط الموروث من الأصل.

لنفترض أن لديك عنصر div أصلي بحجم خط يبلغ 16 بكسل. إذا قمت بإنشاء عنصر فقرة في هذا div ومنحته حجم خط يبلغ 1em ، فسيكون حجم خط الفقرة 16 بكسل.

ومع ذلك ، إذا أعطيت فقرة أخرى حجم الخط 2em فسيتم ترجمتها إلى 32 بكسل. ضع في اعتبارك المثال أدناه:

<فئة div ="div-one">
<فئة ع ="واحد م">1 م على أساس 10 بكسل</ ص>
<فئة ع ="اثنين م">2 م على أساس 10 بكسل</ ص>
</div>
<فئة div ="div-two">
<فئة ع ="واحد م">1 م على أساس 10 بكسل</ ص>
<فئة ع ="اثنين م">2 م على أساس 10 بكسل</ ص>
</div>
</div>

.div-one {
 حجم الخط: 15 بكسل ؛
}
.div-two {
 حجم الخط: 20 بكسل ؛
}
.one-em {
 حجم الخط: 1em ؛
}
.two-em {
 حجم الخط: 2em ؛
}

انتاج

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

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

3. ريم (جذر إم)

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

عادةً ما يكون حجم الخط الافتراضي لمتصفح الويب هو 16 بكسل ، لذا سيكون 1rem 16 بكسل و 2rem سيكون 32 بكسل. ومع ذلك ، في حالة تغيير حجم الخط الجذر إلى 10 بكسل على سبيل المثال ؛ سيكون 1rem 10 بكسل و 2 rem سيكون 20 بكسل.

فيما يلي مثال لتوضيح الأمور:

<فئة div ="div-one">
<! - م ->
<فئة ع ="واحد م">1 م على أساس الحاوية (40 بكسل)</ ص>
<فئة ع ="اثنين م">2 م على أساس الحاوية (40 بكسل)</ ص>
<! - ريم ->
<فئة ع ="واحد ريم">1 rem على أساس الجذر (16 بكسل)</ ص>
<فئة ع ="اثنين ريم">2 rem على أساس الجذر (16 بكسل)</ ص>
</div>

.div-one {
 حجم الخط: 40 بكسل ؛
}
.one-em {
 حجم الخط: 1em ؛
}
.two-em {
 حجم الخط: 2em ؛
}
.one-rem {
 حجم الخط: 1rem ؛
}
.two-rem {
 حجم الخط: 2rem ؛
}

انتاج

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

Px مقابل. إم مقابل. ريم: أي وحدة هي الأفضل؟

لا يوصى باستخدام Em نظرًا لاحتمال وجود تسلسل هرمي معقد للعناصر المتداخلة. عادةً ما يتم تحجيم REM بشكل مناسب باستخدام حجم الخط الافتراضي / الأساسي الجديد المحدد في إعدادات المتصفح بدلاً من PX. هذا يفسر لماذا يجب عليك استخدام REM عند العمل مع محتوى نصي على صفحات الويب الخاصة بك. REM يفوز بالسباق. يضيف التصميم الأفضل للمحتوى الخاص بك وتوسيع نطاقه باستخدام REM ذوقًا إلى موقعك لأنه مثالي لمنشئي مواقع الويب. ستحدد القياسات الفورية للمحتوى الخاص بك شكل ومظهر موقع الويب الخاص بك ، ومع ذلك ، ستحتاج إلى الإبداع.