ما هي وحدات القياس في الـ Css و ما الفرق بين كل واحدة ؟ (px , em , rem ...)

إن كنت تتعامل مع الـ Css من قريب او بعيد، اي سواء كنت مختصا فيه، او فقط تمارسه بين الحين و الآخر ان احتجت بعد الديزاين، فلا بد انك إلتمست في أحد الأيام وحدات القياس في لغة التنسيق CSS، و لربما تستخدم او استخدمت فقط واحدة، ربما الـ px في الغالب كونها الأكثر شهرة و رواجات و الأقدم بالطبع، لكن هل لديك فكرة على وحدات قياس أخرى؟ وحدات قياس ربما تكون أكثر إفادة لك ؟ 

في هذا المقال المُبسط و القصير، سنطلع على أهم وحدات القياس في الـ CSS و على الفرق بين كل واحدة من هذه القياسات، و سنراجع أيضا متى تستخدم كل واحدة و كيف . 

- النسبة المئوية (%) : 

النسبة المئوية او Percentage او إختصارا يُرمز لها بـ % ، هي واحدة من القياسات الأكثر إستخداما في الـ CSS عامة، فهي تساعدنا على تنسيق المضمون بشكل تفاعلي و متجاوب، يشتغل مبدأ الـ % حسب العنصر و العنصر الذي يتضمنه، فإن كان لدي عنصر div و وسطه يوجد عنصر input، فيمكنني التحكم في عرض الـ input بناء على الـ div، فإن كان عرض الـ div مثلا هو عرض الشاشة كاملة، فإن الـ input يأخذ مقاسا مئويا إنطلاقا من ذلك العنصر الأب او الـ div الذي يتضمنه، و في هذه الحالة، إن اعطيت لعرض الـ input قياس 50% فإنه سيأخذ عرض نصف الشاشة، لأن العنصر الأب يملأ الشاشة كاملة . 

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

مثال للإستخدام : width : 25% . 

- الـ px : 

و هي إختصار لعبارة بيكسل Pixel، يتم قياس الشاشة البيكسل، و هي عبارة عن مربعات صغيرة جدا جدا و هي المكونة للشاشة، أصبح البيكسل متداولا بكثرة  في جميع المجالات الآن مثل دقة تصوير الفيديوهات، او دقة  الكاميرات و ما الى ذلك، لكن عودة  بنا للـ CSS فإن يتعلق بوحدة الشاشة، ف 1px يعني حجم مربع بيكسل من الشاشة . 

البيكسل قياس تابث، أي انه لا يتغير بقياس الشاشة او صغر حجم عنصر اب او عنصر إبن او اي شيئ، إن اعطيت لنص قياس 15px، فسيأخذ نفس القياس في جميع الحالات المحتملة لظهور الصفحة على اي متصفح او شاشة او جهاز . 

مثال للإستخدام : font-size : 15px .

- الـ in : 

إختصار لعبارة inches او الإنش، و هي وحدة قياس معروفة  في العالم أجمعه، فواحد انش يساوي 2.5 سنتمتر تقريبا، اي 25 ملمترا، يمكنك ان تُعطي قياس الإنش لأي عنصر تقريبا في الـ DOM لا مشكلة في ذلك، لكنه غير مستخدم بكثرة لأنه غير عملي، فهو ضخم قليلا مقارنة مع وحدات اخرى أكثر دقة، كما انه تابث و ليس مُطلق مثل النسبة المئوية . 

مثال للإستخدام : word-spacing : 2in . 

- الـ cm : 

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

مثال للإستخدام : margin-top : 2cm . 

- الـ mm : 

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

مثال للإستخدام : margin-right : 5mm . 

- الـ em : 

وحدة قياس قوية في الـ CSS و ربما أصبح الكثير يستخدمها اليوم في لغة  التنسيق المشهورة، يأخذ الـ em دقة القياس لحجم الخط الخاص بالعنصر، فهو نسبي و ليس تابث او لديه قياس معقول، الـ em يأخذ نفس القياس الذي يأخذه الـ Font-size الخاص بالعنصر او العنصر الأب، فمثلا، لو كان لدي عنصر p و أعطيت قياس 20px في الخط او الـ Font-size، فإن الـ em سيأخذ قيم 20px و بذلك، يصير 1em = 20px و يتغير بتغير الـ font-size أيضا . 
مثال للإستخدام ( على عنصر p ) : 
font-size : 16px 
margin : 1em .  // في هذه الحالة سيأخذ الـ margin قياس 16px . 

- الـ pt : 

و ترمز إختصارا لعبارة point، في الغالب يتم إستخدام هذا القياس في الخطوط ( في الغالب )، يتم إستخدام point في الكثير من القياسات الرسومية و الأبعاد خصوصا في برامج التصميم مثل الفوتوشوب و غيرها، و يقاس 1 سنتمتر  ب 28 point، على العموم هو قياس تابث أيضا يمكن إستخدامه على النصوص او الخطوط من أجل إعطائها قياس مضبوط او كبير قليلا كون ان الـ pt  يُعطي قياسا أكبر من الpx و غيرها . 
مثال للإستخدام : font-size : 2pt .

- الـ rem : 

وحدة قياس في الـ Css أيضا لكنها لا تستخدم بكثرة، الـ rem تعني root em اي القياس السابق الذي شرحناه em، لكن هذه المرة لا يأخذ قياس الـ Font-size الخاص بالعنصر الحالي، بل يأخذ قياس الخط الخاص بالعنصر الأب او الـ Parent في عناصر الـ DOM، لإستخدام الـ rem سيتوجب عليك ان تفهم عناصر الـ DOM بشكل جيد، على العموم هو لا يُستخدم كثيرا و لا يُذكر أيضا كثيرا في شروحات الـ CSS و غيرها كونه غير عملي في العديد من تصاميم واجهات الموقع، لكن توجب علينا ذكره في هذا المقال . 
مثال للإستخدام :  padding : 1rem . 

- الـ vh / vw : 

و هي إختصار لكل من viewport height و viewport width، تُستخدم كثيرا في ضبط قياس عنصر ما على الصفحة، خصوصا في الـ height و الـ width كما يحمل الإسم، و هما عنصرين نسبيين أيضا يمثلان لمبدأ الـ Viewport، و بالـ Viewport نقصد حجم الشاشة او الجهاز، فمثلا لو وضعنا لعنصر ما عرض 5vw، فسيأخذ قيمة بناءا على الشاشة الحالية، لكن اذا ما قمنا بفتح نفس الموقع في شاشة الهاتف، فستجد ان العنصر بقي في نفس المكان بناءا على الجهاز، و لم يتم تغيير مكانه او تغيير القياس، يُستخدم جدا في التعامل مع عرض و طول  الصفحات التجاوبية على أجهزة مختلفة . 
مثال : height : 15vh . 

وحدات قياس أخرى : 

يوجد وحدات قياس اخرى مثل ch و vmax و vmin و أيضا ex، لكن لن نتطرق لشرحها على حدة كونها لا تستخدم كثيرا، او شبيهة بقياسات سابقة شرحناها في المقال أعلاه .