وحدات CSS

وحدات CSS

CSS تحتوي على عدة وحدات لتمثيل الطول.

عديد من خصائص CSS تقبل قيم "الطول"، مثل width،margin،padding،font-size وغيرها.

الطول هو رقم يتبعه وحدة الطول، مثل 10px،2em وغيرها.

مثال

استخدام px (البكسل) لضبط قيم الطول المختلفة:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

جرب بنفسك

لا يمكن وجود فجوة بين الرقم والوحدة. ولكن، إذا كان القيمة 0، يمكن تجاهل الوحدة.

للبعض الخصائص في CSS، يُسمح باستخدام أطوال سلبية.

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

الطول المطلق

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

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

الوحدة الوصف TIY
cm السنتيمتر تجربة!
mm الملليمتر تجربة!
in البوصة (1in = 96px = 2.54cm) تجربة!
px * البكسل (1px = 1/96 من بوصة) تجربة!
pt النقطة (1pt = 1/72 من بوصة) تجربة!
pc البايت (1pc = 12 pt) تجربة!

* البكسل (px) هو مقارنة بالجهاز المرئي. للجهاز ذي dpi المنخفض، 1px هو نقطة (بكسل) على الشاشة. للطابعات و الشاشات عالية الدقة، 1px يمثل عدة بكسل.

الطول النسبي

وحدة الطول النسبية تحدد الطول مقارنة بوحدة طول أخرى. وحدة الطول النسبية تؤدي إلى تدرج أفضل بين وسائط الترجيع المختلفة.

الوحدة الوصف TIY
em مقارنة حجم الخط (font-size) للعنصر (2em يمثل ضعف حجم الخط الحالي) تجربة!
ex مقارنة بارتفاع الخط (x-height) للخط الحالي (استخدام نادر) تجربة!
ch مقارنة بعرض "0" (العدد الصفر) تجربة!
rem مقارنة حجم الخط (font-size) للعنصر الجذر تجربة!
vw مقارنة بعرض العرض * 1% تجربة!
vh مقارنة بارتفاع العرض * 1% تجربة!
vmin مقارنة بمقاس العرض * الصغير 1% تجربة!
vmax 1% من الأبعاد الأكبر للنافذة البصرية* تجربة!
% على عكس العنصر الأب تجربة!

نصيحة:يمكن استخدام وحدات em و rem لإنشاء تصميمات قابلة للتوسع مثالية!

* النافذة البصرية (Viewport) = حجم نافذة المتصفح. إذا كانت النافذة البصرية 50 سنتيمتر العرض، فإن 1vw = 0.5 سنتيمتر.

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم هذه وحدة الطول بشكل كامل.

وحدات الطول
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0