وحدات CSS
وحدات CSS
يحتوي CSS على عدة وحدات مختلفة للتعبير عن الطول.
تأخذ العديد من خصائص CSS قيم "length" ، مثل width، margin، padding،
font-size، إلخ.
الطول عبارة عن رقم متبوع بوحدة طول ، مثل 10px،
2emوما إلى ذلك.
مثال
اضبط قيم طول مختلفة ، باستخدام بكسل (بكسل):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
ملاحظة: لا يمكن أن تظهر مسافة بيضاء بين الرقم والوحدة. ومع ذلك ، إذا كانت القيمة
0كذلك ، يمكن حذف الوحدة.
بالنسبة لبعض خصائص CSS ، يُسمح بالأطوال السالبة.
هناك نوعان من وحدات الطول : مطلق ونسبي .
أطوال مطلقة
وحدات الطول المطلقة ثابتة وسيظهر الطول المعبر عنه في أي منها بهذا الحجم بالضبط.
لا يوصى باستخدام وحدات الطول المطلق على الشاشة ، لأن أحجام الشاشة تختلف كثيرًا. ومع ذلك ، يمكن استخدامها إذا كان وسيط الإخراج معروفًا ، مثل تخطيط الطباعة.
| Unit | Description |
|---|---|
| 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) |
* البكسل (بكسل) نسبة إلى جهاز العرض. بالنسبة للأجهزة ذات النقاط المنخفضة في البوصة ، فإن 1 بكسل هي وحدة بكسل واحدة (نقطة) لجهاز العرض. بالنسبة للطابعات والشاشات عالية الدقة ، تتضمن 1 بكسل وحدات بكسل متعددة للجهاز.
أطوال النسبية
تحدد وحدات الطول النسبية طولًا متعلقًا بخاصية طول أخرى. وحدات الطول النسبية تتدرج بشكل أفضل بين وسائط العرض المختلفة.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
نصيحة: الوحدتان em و rem عمليتان في إنشاء تخطيط قابل للتطوير بشكل مثالي!
* منفذ العرض = حجم نافذة المتصفح. إذا كان عرض منفذ العرض 50 سم ، 1vw = 0.5 سم.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم وحدة الطول بشكل كامل.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 |