كل وحدات CSS: المطلقة، والنسبية إلى الخط، والنسبية إلى إطار العرض، والدوال السائلة، ووحدات الزاوية والوقت والدقة — تُقاس كل وحدة مقابل ماذا، ومتى تصلح للاستخدام.
تحتفظ الوحدات المطلقة (px وpt) بحجم ثابت بغض النظر عن السياق؛ أما الوحدات النسبية (rem وvw و%) فتتدرج مقابل قيمة مرجعية. فضّل rem لأحجام الخطوط: فهو يحترم إعداد المستخدم لحجم خط الجذر، فتحترم طباعتك تفضيل الوصول الخاص به. استخدم clamp() لطباعة سائلة تكبر وتصغر مع إطار العرض دون أن تتجاوز حدًّا أدنى أو أقصى أبدًا.
جدول مرجعي · 38 إدخالات
وحدات CSSExplained
38 of 38 rows
مطلقة
1/96 من البوصة (بكسل المرجع في CSS).
تحديد ثابت لواجهة المستخدم: الحدود والخطوط الرفيعة وأبعاد الأيقونات.
border: 1px solid #000;
1/72 من البوصة (1pt = 1.333px).
أنماط الطباعة، حيث تقابل الأحجام الورق الفعلي.
font-size: 12pt;
1 سنتيمتر (≈37.8px).
تخطيطات الطباعة التي تحتاج مقاسات حقيقية.
margin: 2cm;
1 ملليمتر (≈3.78px).
قياسات طباعة دقيقة.
padding: 5mm;
1 بوصة (96px = 2.54cm).
تخطيطات الطباعة مقيسة بالبوصة.
margin: 1in;
نسبية إلى الخط
حجم خط العنصر نفسه (موروث من أصله).
تباعد يتدرج مع النص المحيط.
padding: 1em;
حجم خط العنصر الجذر (عنصر html).
أحجام الخطوط: يحترم إعداد المستخدم لحجم خط الجذر.
font-size: 1.25rem;
عرض المحرف '0' في الخط الحالي.
ضبط طول سطر مقروء (عدد المحارف في السطر).
max-width: 70ch;
ارتفاع x للخط الحالي (ارتفاع حرف 'x' الصغير).
مقاييس رأسية مرتبطة بالخط.
line-height: 2ex;
ارتفاع الأحرف الكبيرة في الخط الحالي (ارتفاع حرف كبير).
مقاييس رأسية على قدر الأحرف الكبيرة، أضيق من ex.
padding-top: 0.5cap;
عرض الرمز '水' (ماء) في الخط الحالي.
تحجيم يتتبع خلية محرف CJK واحدة.
width: 4ic;
ارتفاع السطر المحسوب للعنصر نفسه.
تحديد أحجام العناصر بأسطر نص كاملة.
height: 3lh;
ارتفاع سطر العنصر الجذر.
تباعد بمضاعفات ارتفاع السطر الأساسي للمستند.
margin-block: 2rlh;
نسبية إلى إطار العرض
قيمة الأصل للخاصية نفسها.
تخطيطات سائلة مقيسة على العنصر الحاوي.
width: 50%;
1% من عرض إطار العرض.
أقسام بعرض كامل مقيسة على عرض الشاشة.
width: 100vw;
1% من ارتفاع إطار العرض.
أقسام hero أو طبقات تغطي ارتفاع الشاشة.
height: 100vh;
1% من أصغر بُعد لإطار العرض.
تحجيم العناصر لتلائم الشاشة في أي اتجاه.
font-size: 5vmin;
1% من أكبر بُعد لإطار العرض.
ملء المحور المهيمن لإطار العرض.
font-size: 5vmax;
1% من ارتفاع إطار العرض الصغير (واجهة المتصفح ظاهرة بالكامل).
أقسام بارتفاع كامل على الجوال تتسع فوق واجهة المتصفح الموسعة.
height: 100svh;
1% من ارتفاع إطار العرض الكبير (واجهة المتصفح مخفية).
خلفيات يجب أن تغطي الشاشة حتى حين تنطوي واجهة المتصفح.
height: 100lvh;
1% من ارتفاع إطار العرض الديناميكي، متتبعة واجهة المتصفح عند ظهورها واختفائها.
حل الجوال لمشكلة 100vh: يتغير الارتفاع مع ظهور واجهة المتصفح.
height: 100dvh;
1% من عرض إطار العرض الصغير.
نظير svh للعرض في أضيق حالة لإطار العرض.
width: 100svw;
1% من عرض إطار العرض الكبير.
نظير lvh للعرض في أعرض حالة لإطار العرض.
width: 100lvw;
1% من عرض إطار العرض الديناميكي، متتبعًا واجهة المتصفح.
نظير dvh للعرض عندما يتغير حجم إطار العرض مع الواجهة.
width: 100dvw;
1% من حجم إطار العرض على طول المحور الداخلي (العرض في أنماط الكتابة الأفقية).
تحجيم وفق إطار العرض يتبع اتجاه الكتابة.
width: 50vi;
1% من حجم إطار العرض على طول المحور الكتلي (الارتفاع في أنماط الكتابة الأفقية).
تحجيم وفق إطار العرض يبقى صحيحًا في أنماط الكتابة العمودية.
height: 50vb;
سائلة
قيمة مفضلة محدودة بحد أدنى وحد أقصى.
طباعة سائلة لا تتجاوز حدًّا أدنى أو أقصى أبدًا.
width: clamp(320px, 80vw, 1100px);
أصغر الوسائط المفصولة بفواصل.
تقييد حجم كي لا يتجاوز حدًّا أقصى أبدًا.
width: min(100%, 600px);
أكبر الوسائط المفصولة بفواصل.
فرض حجم أدنى ينمو مع إطار العرض.
width: max(50%, 300px);
الزاوية
1/360 من دائرة كاملة.
تحويلات الدوران ومواضع زوايا التدرجات.
transform: rotate(45deg);
راديان؛ 1rad ≈ 57.2958deg.
زوايا محسوبة رياضيًا، مثل التحويلات المولدة.
transform: rotate(1.5708rad);
غراد؛ 400grad = دائرة كاملة.
قيم زوايا قديمة أو خاصة بالمساحة.
transform: rotate(100grad);
1turn = دائرة كاملة بزاوية 360°.
دورات كاملة أو نصفية تُقرأ بنظرة واحدة.
transform: rotate(0.5turn);
الوقت
ثانية واحدة.
مدد الحركات والانتقالات.
transition: opacity 0.3s;
مللي ثانية واحدة (1s = 1000ms).
حركات قصيرة لتغذية الواجهة الراجعة والتأخيرات.
animation-duration: 150ms;
الدقة
نقطة لكل بوصة من الخرج.
استعلامات وسائط الدقة الموجهة للطباعة.
@media (min-resolution: 300dpi)
نقطة لكل وحدة px؛ يعادل 1dppx شاشة قياسية بدقة 96dpi.