لغة CSS (Cascading Style Sheets) هي لغة تُستخدم لتنسيق وتصميم مواقع الويب. إن تصميم الواجهة الرسومية لموقع الويب يتطلب استخدام العديد من الوحدات المختلفة لقياس وتحديد الأبعاد والمسافات. تُستخدم أنواع مختلفة من القياسات في CSS لتحقيق التصميم المرغوب، وهنا سنلقي نظرة على بعضها الأنواع الشائعة ونفصل الفروق بينها. 

 1. القياسات المطلقة (Absolute Units) 

 القياسات المطلقة تعتمد على وحدات قياس ثابتة وتحدد بدقة حجم العناصر على الشاشة بغض النظر عن دقة الشاشة أو حجمها. القياسات المطلقة تشمل: 

 بيكسل (Pixel - px) 

 البيكسل هو وحدة قياس مطلقة شائعة جدًا في CSS. يتمثل البيكسل في نقطة واحدة على الشاشة ويمكن استخدامه لتحديد العرض والارتفاع والحجم بدقة. على سبيل المثال: 

div {
    width: 300px;
    height: 200px;
    font-size: 16px;
}

 بوصة (Inch - in) وسنتيمتر (Centimeter - cm) 

 تستخدم هذه الوحدتين لتحديد الأبعاد بناءً على البوصة والسنتيمتر على التوالي. على سبيل المثال: 

div {
    width: 40in;
    height: 10cm;
}

 2. القياسات النسبية (Relative Units) 

 القياسات النسبية تعتمد على الحجم النسبي للعناصر بالنسبة لعناصر أخرى. هذا يعني أنها تتكيف بشكل أفضل مع مختلف أحجام الشاشات وأجهزة العرض. القياسات النسبية تشمل: 

 النسبة (Percentage - %) 

 تُستخدم النسبة لتحديد الأبعاد بناءً على نسبة مئوية من الأبعاد الأم (العنصر الأساسي). على سبيل المثال: 

div {
    width: 50%;
    font-size: 120%;
}

 الإم (em) 

 الإم هي وحدة نسبية تستند إلى حجم النص الحالي في العنصر. إذا كان حجم النص الأساسي هو 16 بيكسل، فإن 1 إم سيكون مساويًا لـ 16 بيكسل. مثال: 

div {
    font-size: 1.5em;
    margin: 1em;
}

 العنصر الجذر (Root Em - REM): 

 وحدة الـ REM تشبه الـ EM ولكنها تستند إلى حجم النص الجذري في العنصر الجذري (عادةً هو الـ ). هذا يجعلها مفيدة جدًا لتحديد الأبعاد بناءً على النص الجذري الذي يمكن تغييره بسهولة. مثال: 

html {
    font-size: 16px;
}
div {
    font-size: 1.5rem;
    margin: 1rem;
}

 3. القياسات المرنة (Flexible Units) 

 القياسات المرنة تستخدم لتحقيق تصميم مرن يعتمد على حجم الشاشة أو نوع الجهاز. من بين هذه القياسات: 

 العرض النسبي (Viewport Width - vw) والارتفاع النسبي (Viewport Height - vh) 

 هذه الوحدات تعتمد على عرض وارتفاع نافذة المشاهدة (viewport) للمتصفح. على سبيل المثال: 

div {
    width: 50vw;
    height: 30vh;
}

 العرض النسبي للنص (Viewport Width - vmin) والارتفاع النسبي للنص (Viewport Height - vmax) 

 هذه الوحدتين تسمح بتحديد الأبعاد بناءً على الأبعد الأقل أو الأكبر بين عرض وارتفاع النافذة. مثال: 

div {
    width: 40vmin;
    height: 60vmax;
}

 الخلاصة 

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