وحدات القياس في CSS (px rem em vh)
استخدم rem لأحجام خطوط الواجهة، واجعل px للحدود الدقيقة فقط.
| الوحدة | نسبة إلى | الاستخدام المعتاد |
|---|---|---|
| px | بكسل الجهاز (بكسل CSS) | الحدود، الأيقونات الدقيقة |
| rem | حجم خط عنصر الجذر | مقياس الخطوط، التباعد |
| em | حجم خط العنصر الأب | أبعاد داخل المكوّن |
| % | خاصية العنصر الأب | الأعرض، التخطيطات المرنة |
| vw | 1% من عرض نافذة العرض | الأقسام الممتدة بالكامل |
| vh | 1% من ارتفاع نافذة العرض | ارتفاع الواجهة الرئيسية (انتبه لواجهة الهاتف) |
| vmin / vmax | الضلع الأصغر/الأكبر للنافذة | أبعاد متجاوبة شبه مربعة |
| ch | عرض المحرف «0» | كتل الشيفرة، الحقول أحادية المسافة |
| ex | ارتفاع x للخط | تنسيق دقيق نادر |
| svh / lvh / dvh | نافذة صغيرة/كبيرة/ديناميكية | ارتفاع آمن مع متصفح الهاتف |
ملاحظات
- على الهاتف قد تشمل 100vh شريط المتصفح المخفي؛ فضّل dvh/svh عند توفرها.
- إعداد حجم خط المستخدم يؤثر على rem — وهذا مفيد عادةً لإتاحة الوصول.
الأسئلة الشائعة
- كم يساوي 1rem بالبكسل؟
- يساوي 1rem حجم خط عنصر الجذر؛ مع القيمة الافتراضية 16px يكون 1rem = 16px.
- ما الفرق بين em وrem؟
- ترتبط rem دائمًا بحجم خط الجذر، بينما ترتبط em بحجم الخط الموروث للعنصر الحالي.
- لماذا لا تكون 100vh دقيقة على الهاتف؟
- متصفحات الهاتف تخفي شريط العنوان وتظهره، فتتجاوز 100vh المساحة المرئية؛ استخدم dvh أو svh عند توفرهما.