وحدات CSS
CSS لديها العديد من وحدات مختلفة للتعبير عن طول.
العديد من الخصائص CSS تأخذ "length" القيم، مثل العرض، الهامش، الحشو، وحجم الخط، الحدود العرض، الخ
طول هو عدد تليها وحدة طول، مثل 10px، 2em، الخ
لا يمكن أن تظهر المسافات بين عدد وحدة. ومع ذلك، إذا كانت القيمة 0، وحدة يمكن حذفها.
بالنسبة لبعض خصائص CSS، ويسمح أطوال السلبية.
هناك نوعان من وحدات الطول: النسبية والمطلقة.
دعم المتصفح
الأرقام في الجدول تحدد أول إصدار المستعرض الذي تؤيد تماما وحدة طول.
وحدة طول | |||||
---|---|---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | تسعة | 1.0 | 7.0 | 20.0 |
rem | 4.0 | تسعة | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | تسعة | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 9.0 * | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | غير معتمد | 19.0 | غير معتمد | 20.0 |
Note: إنترنت إكسبلورر 9 يدعم vmin مع اسم غير قياسي: VM.
الأطوال النسبية
وحدات طول النسبية تحدد طول قريب بالممتلكات طول آخر. وحدات طول النسبية موازين أفضل بين وسائل التقديم المختلفة.
وحدة | وصف |
---|---|
em | نسبة إلى حجم الخط للعنصر (2em means 2 times the size of the current font) جربه |
ex | بالنسبة إلى الأشعة ارتفاع الخط الحالي (rarely used) جربه |
ch | بالنسبة لعرض "0" (zero) |
rem | بالنسبة لحجم الخط من العنصر الجذر |
vw | نسبة إلى 1٪ من عرض من العرض * جربه |
vh | نسبة إلى 1٪ من ذروة العرض * جربه |
vmin | نسبة إلى 1٪ من العرض ل* البعد أصغر جربها |
vmax | نسبة إلى 1٪ من العرض ل* أكبر البعد جربها |
% |
Tip: إن م والعينية الوحدات العملية في خلق تخطيط وقابلة تماما!
* منفذ العرض = حجم نافذة المتصفح. إذا كان العرض هو واسعة 50CM، 1vw = 0.5CM.
مطلق أطوال
يتم إصلاح وحدات طول المطلقة وطول أعرب في أي من هذه سوف تظهر تماما بهذا الحجم.
لا ينصح حدات طول المطلقة للاستخدام على الشاشة، لأن أحجام الشاشة تختلف كثيرا. ومع ذلك، فإنها يمكن أن تستخدم إذا كان من المعروف المتوسط الإخراج، مثل لتخطيط الطباعة.
وحدة | وصف |
---|---|
cm | سم جربه |
mm | ملليمترات جربه |
in | بوصة (1in = 96px = 2.54cm) جربه |
px * | بكسل (1px = 1/96th of 1in) جربه |
pt | نقاط (1pt = 1/72 of 1in) جربه |
pc | بيكا (1pc = 12 pt) جربه |
* بكسل (px) قريبة إلى جهاز العرض. للأجهزة منخفضة نقطة في البوصة، 1PX هو بكسل جهاز واحد (dot) من الشاشة. للطابعات وشاشات عالية الدقة 1PX يعني بكسل جهاز متعددة.