CSS - Measurement Units وحدات القياس
-
يدعم CSS عددًا من وحدات القياس التي لا مفر منها في CSS. على سبيل المثال الخصائص الطول length، العرض width ، الهوامش margin ، حجم الخط font-size وغيرها الكثير. تستخدم وحدا ت القياس .
يدعم CSS نوعين من وحدات القياس وهما : Absolute Lengths ، و Relative Lengths
نتعرف عليهم بالتفصيل :
Absolute Lengths
في هذا النوع من وحدات القياس يتم التعامل مع القيم بالضبط كما هي (ثابته) بحيث اذا تم تطبيق القيم ملا بالسنتيمتر فا اكيد بتكون النتيجة تمام ثابته حسب القيمة المطلوبة.
لا يوصى باستخدام هذ النوع في التطبيقات عموما ، لأن أحجام الشاشة تختلف كثيرًا. ولكن يمكن استخدامها إذا كان Output معروف، مثل تخطيط الطباعة.
تمام نتعرف على هذه الأنواع
| الوحدة Unit | الوصف |
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {font-size: 1cm;}
.p2 {font-size: 10mm;}
.p3 {
font-size: 0.5in;
}
.p4 {
font-size: 10pt;
}
.p5 {
font-size: 1pc;
}
</style>
</head>
<body>
<p class="p1">1 CM Units</p>
<p class="p2">1 mm </p>
<p class="p3">0.5 in Units</p>
<p class="p4">0.5 pt Units</p>
<p class="p5">0.5 pc Units</p>
</body>
</html>
شغل الصفحة وشوف النتيجة :
| الوحدة Unit | الوصف |
| em | وحدة قياس تساوي 16px وهي القيمة الافتراضية للخط 1 em= 16px |
| ex | متعلق ب x-height للخط الحالي (نادرًا ما يستخدم) |
| ch | متعلق بالعرض 0 |
| rem | متعلق بحجم الخط للعنصر الجذر |
| vw | ويستخدم لجعل الحجم متناسب مع حجم الشاشة بالعرض width |
| vh | ويستخدم لجعل الحجم متناسب مع حجم الشاشة بالطول height |
| vmin | بالنسبة إلى 1٪ من smaller dimension لviewport@@#s* 1vmin = 1vw or 1vh whichever is smaller |
| Vmax | بالنسبة إلى 1٪ من larger dimension لviewport@@#s* 1vmax = 1vw or 1vh, whichever is larger |
| % | متعلق ب parent element |
اترك تعليقك