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

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

اجعل فيديو اليوم

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

---

---

لا يحتوي wifi على عنوان IP صالح لنظام التشغيل windows 10

أطوال مطلقة

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

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

وحدة	وصف
سم	سم
مم	ملليمتر
في	بوصة (1 بوصة = 96 بكسل = 2.54 سم)
بكسل *	بكسل (1 بكسل = 1/96 من 1 بوصة)
نقطة	النقاط (1 نقطة = 1/72 من 1 بوصة)
كمبيوتر	البستوني (قطعة واحدة = 12 نقطة)

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

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

وحدة	على صلة قربى ب
في*	متعلق بحجم الخط للعنصر (2em تعني ضعف حجم الخط الحالي)
السابق	متعلق بارتفاع x للخط الحالي (نادرًا ما يستخدم)
الفصل	بالنسبة إلى عرض '0' (صفر)
rem *	متعلق بحجم الخط للعنصر الجذر
فولكس فاجن	متناسب مع 1٪ من عرض منفذ العرض *
ه	متناسب مع 1٪ من ارتفاع منفذ العرض *
دقيقة	نسبة إلى 1٪ من الأبعاد الأصغر لإطار العرض *
vmax	نسبة إلى 1٪ من الأبعاد الأكبر لإطار العرض *
٪	متعلق بالعنصر الأصل

1. بكسل (بكسل)

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

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

---

---

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

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

---

---

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

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

انتاج

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

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

2. أنا (م)

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

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

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

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div> 

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

انتاج

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

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

3. Rem (Root Em)

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

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

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

كيفية الحفاظ على الكمبيوتر المحمول قيد التشغيل عند إغلاق نظام التشغيل windows 10

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div> 

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
} 

انتاج

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

Px مقابل Em مقابل Rem: ما الوحدة الأفضل؟

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