محوّل وحدات CSS
أدخل قيمة مرة واحدة وشاهدها بكل وحدات الطول في CSS — px و rem و em و pt و % و vw و vh — مع حجم خط الجذر وحجم خط العنصر الأب ومنفذ العرض الذي تختاره. انسخ أي نتيجة بنقرة واحدة.
تحويلات شائعة
محوّلة إلى كل الوحدات
تعتمد rem و em و % على حجم الخط؛ بينما تعتمد vw و vh على منفذ العرض. أما px و pt فلهما نسبة ثابتة (1pt = 1.3333px). اضبط السياق أعلاه إذا كانت قيمك الافتراضية مختلفة.
مرجع px إلى rem (الجذر = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
مع حجم خط الجذر الافتراضي 16px، اقسم البكسلات على 16 للحصول على rem، واضربها في 0.75 للحصول على النقاط (pt).
حول محوّل وحدات CSS
يوفّر CSS عدة طرق للتعبير عن الطول، واختيار الوحدة الصحيحة هو الفرق بين تخطيط يتكيّف بأناقة وآخر ينهار. يحوّل هذا الأداة قيمة واحدة إلى كل وحدات CSS الشائعة دفعة واحدة. وحدة px (البكسل) هي الوحدة المرجعية المطلقة — في CSS يُعرّف البكسل الواحد بأنه 1/96 من البوصة. أما rem فهي نسبية إلى حجم خط جذر المستند (عنصر <html>) الذي يساوي 16px افتراضياً، لذا فإن 1rem = 16px و1.5rem = 24px؛ وrem هي المعيار الحديث لتحديد الأحجام لأن تغيير قيمة جذر واحدة يعيد قياس الصفحة بأكملها، وهو أمر ممتاز لإمكانية الوصول. أما em فهي نسبية إلى حجم خط العنصر الأب، لذا تتراكم عند التداخل. وpt (النقطة) هي وحدة الطباعة، ثابتة عند 1pt = 1/72 من البوصة = 1.3333px، لذا 12pt = 16px. وفي سياق font-size تساوي % حجم خط العنصر الأب، مما يجعل 100% مماثلة لـ 1em. أما vw و vh فهما 1% من عرض وارتفاع منفذ العرض — مثالية للتخطيطات المرنة بملء الشاشة. اضبط حجم خط الجذر وحجم خط الأب وحجم منفذ العرض الخاص بك في اللوحة المتقدمة؛ وتغطي القيم الافتراضية المعقولة (16/16/1920×1080) حالة px↔rem اليومية مباشرة.
كيفية تحويل وحدات CSS
- 1 اكتب قيمة واختر الوحدة التي هي بها (مثلاً 24 px أو 1.5 rem).
- 2 اقرأ القيمة المكافئة بكل الوحدات الأخرى في شبكة النتائج، وانقر زر النسخ على أي بطاقة لنسخها جاهزة للصق (مثل «1.5rem»).
- 3 افتح اللوحة المتقدمة لتغيير حجم خط الجذر أو حجم خط الأب أو حجم منفذ العرض إذا كان مشروعك لا يستخدم القيم الافتراضية 16px / 1920×1080.
صيغ التحويل
يمرّ كل تحويل عبر البكسلات باستخدام نسب CSS الثابتة: rem = px ÷ حجم-خط-الجذر (الافتراضي 16) — لذا px = rem × 16. em = px ÷ حجم-خط-الأب (الافتراضي 16). pt = px × 0.75، لأن 1px = 1/96 بوصة و1pt = 1/72 بوصة، مما يعطي 1pt = 96/72 px = 1.3333px و1px = 0.75pt. % = px ÷ حجم-خط-الأب × 100 (النسبة المئوية لـ font-size، حيث 100% = حجم خط الأب، مماثلة لـ 1em). vw = px ÷ عرض-منفذ-العرض × 100، و vh = px ÷ ارتفاع-منفذ-العرض × 100. بالقيم الافتراضية يعني ذلك 16px = 1rem = 1em = 100% = 12pt = 0.8333vw = 1.4815vh. وإذا ضُبط أساس مثل حجم خط الجذر على 0، تصبح الوحدة المقابلة غير معرّفة وتُعرض على هيئة «—» بدلاً من اللانهاية.
الأسئلة الشائعة
كم تساوي 1rem بالبكسل؟
افتراضياً 1rem = 16px، لأن rem نسبية إلى حجم خط الجذر (<html>) وتضبطه المتصفحات على 16px منذ البداية. لذا فإن 1.5rem = 24px و2rem = 32px. وإذا غيّرت حجم خط الجذر — مثلاً إلى 10px لتبسيط الحساب — فإن 1rem يساوي تلك القيمة (وتصبح 16px مساوية لـ 1.6rem). اضبط حجم خط الجذر الخاص بك في اللوحة المتقدمة فيعيد المحوّل الحساب فوراً.
ما هي صيغة التحويل من px إلى rem؟
rem = px ÷ حجم-خط-الجذر، والعكس px = rem × حجم-خط-الجذر. مع جذر افتراضي 16px، يعني ذلك قسمة قيمة البكسل على 16 للحصول على rem: 24px ÷ 16 = 1.5rem، و10px ÷ 16 = 0.625rem. وتُفضّل rem على px لأحجام الخطوط والمسافات لأنها تحترم إعداد حجم الخط في متصفح المستخدم، وهو أفضل لإمكانية الوصول.
ما هو حجم خط الجذر الافتراضي؟
حجم خط الجذر الافتراضي في كل المتصفحات الكبرى هو 16px، ويُطبّق على عنصر <html>. وهو الأساس لوحدة rem، لذا 1rem = 16px ما لم تتجاوزه أنت (أو ورقة أنماط). يستخدم هذا المحوّل 16px كقيمة افتراضية لكل من حجم خط الجذر وحجم خط الأب؛ ويمكنك تغيير أيٍّ منهما في اللوحة المتقدمة ليطابق مشروعك.
ما الفرق بين px و pt؟
px (البكسل) هي الوحدة القياسية للشاشات وتُعرّف في CSS بأنها 1/96 من البوصة. أما pt (النقطة) فهي الوحدة التقليدية للطباعة والطباعة الفنية، وتساوي 1/72 من البوصة. وهذا يجعل النسبة ثابتة: 1pt = 96/72 px ≈ 1.3333px، و1px = 0.75pt. لذا 12pt = 16px، وهذا سبب ظهور مستند مطبوع بحجم 12pt وعنوان على الشاشة بحجم 16px بالحجم نفسه. استخدم px (أو rem) للويب واحتفظ بـ pt لأوراق أنماط الطباعة.
أدوات ذات صلة
واصل البناء على UnitConv. حوّل الألوان بين HEX و RGB و HSL باستخدام محوّل الألوان، وأنشئ تدرّجات CSS، وتحقّق من نسب التباين وفق WCAG، واحسب نسب الأبعاد، واستكشف وحدات الطول خارج نطاق الويب في محوّل الوحدات الرئيسي.