محوّل وحدات CSS
حوّل بين وحدات CSS: px و rem و em و vw و vh و %. اضبط حجم الخط الأساسي وأبعاد إطار العرض للحصول على نتائج دقيقة.
الإعدادات
جميع المعادلات
| الوحدة | القيمة |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
مرجع سريع (px ← rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
كيفية تحويل وحدات CSS
- اضبط حجم الخط الأساسي (الافتراضي: 16px) وأبعاد إطار العرض
- أدخل قيمة واختر وحدتها (px أو rem أو em أو vw أو vh أو %)
- اعرض جميع القيم المعادلة في وحدات CSS الأخرى
- راجع جدول المرجع السريع لتحويلات px إلى rem الشائعة
حالات الاستخدام
- •التصميم المتجاوب: تحويل قيم البكسل الثابتة إلى وحدات rem أو vw مرنة
- •تسليم التصميم: ترجمة مواصفات البكسل من Figma/Sketch إلى قيم rem في CSS
- •إمكانية الوصول: استخدام وحدات rem حتى يحترم النص تفضيلات حجم الخط لدى المستخدم
- •التخطيط: حساب الأبعاد النسبية لإطار العرض للأقسام الممتدة بالكامل
الصيغة
تحويلات وحدات CSS تعتمد على حجم الخط الأساسي وأبعاد إطار العرض. rem = px / baseFontSize. vw = px / viewportWidth × 100. vh = px / viewportHeight × 100.
الأسئلة الشائعة
ما الفرق بين rem و em؟
rem نسبي إلى حجم خط العنصر الجذري (html). أما em فنسبي إلى حجم خط العنصر الأب. على مستوى الجذر، يكونان متماثلَين.
ما حجم الخط الافتراضي في المتصفح؟
تستخدم معظم المتصفحات 16px افتراضيًا، مما يعني أن 1rem = 16px ما لم يُغيَّر حجم خط الجذر.
متى يجب استخدام vw/vh؟
استخدم vw (عرض إطار العرض) و vh (ارتفاع إطار العرض) للعناصر التي يجب أن تتوسع بشكل متناسب مع نافذة المتصفح، كأقسام الهيرو أو الخلفيات التي تملأ الشاشة بالكامل.
كيف أحوّل px إلى rem؟
اقسم قيمة البكسل على حجم الخط الأساسي. بالقيمة الافتراضية 16px: 24px ÷ 16 = 1.5rem.
ما الذي تكون الوحدة % نسبية إليه؟
الوحدة % تعتمد على السياق في CSS. بالنسبة لـ font-size تكون نسبية إلى font-size العنصر الأب. بالنسبة لـ width تكون نسبية إلى عرض العنصر الأب.