محوّل وحدات CSS (px وrem وem وvw وpt…)
حوّل أطوال CSS بين px وrem وem و% وvw وvh وvmin وvmax وpt وpc وin وcm وmm وQ بحجم خط جذري ونافذة عرض من اختيارك. مجاني وفوري.
1remتتبع الوحدات المطلقة معيار CSS: 1in = 96px = 2.54cm = 72pt = 6pc و1Q = 0.25mm. تعتمد rem على حجم خط الجذر، وem و% على حجم خط العنصر الأب (كما في font-size)، وvw/vh/vmin/vmax على منفذ العرض. تُقرَّب النتائج إلى 4 منازل عشرية.
ما هو محوّل وحدات CSS؟
حوّل طول CSS بين الوحدات المطلقة (px وpt وpc وin وcm وmm وQ) والوحدات النسبية (rem وem و% وvw وvh وvmin وvmax). اضبط حجم الخط الجذري وحجم خط الأب وحجم نافذة العرض لتُحسب الوحدات النسبية وفق سياقك الفعلي؛ وتُعرض كل الوحدات دفعة واحدة.
كيفية استخدام محوّل وحدات CSS
- أدخل القيمة واختر وحدتي من وإلى.
- اضبط حجم الخط الجذري (لـ rem) وحجم خط الأب (لـ em و%) وعرض نافذة العرض وارتفاعها.
- انسخ النتيجة الرئيسية أو انقر أي بطاقة وحدة لنسخ قيمتها.
مثال
24px (root 16px)
1.5rem · 18pt · 1.25vw (1920px viewport)
متى تستخدم محوّل وحدات CSS
استخدمه عند تحويل مواصفات التصميم بـ px إلى CSS قائم على rem، أو للتحقق من معنى قيمة vw على شاشة معينة. % يكافئ em فقط في font-size؛ أما في العرض أو الحشو فتشير % إلى الكتلة الحاوية التي لا تستطيع هذه الأداة معرفتها.
كيف يعمل محوّل وحدات CSS
يتم كل شيء عبر بكسلات CSS. تستخدم الوحدات المطلقة نسب CSS الثابتة: 1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc و1Q = 0.25mm. يضرب rem في حجم الخط الجذري، وem في حجم خط الأب، و% نسبة مئوية من حجم خط الأب (تفسير font-size)، وvw/vh هما 1% من عرض/ارتفاع نافذة العرض، ويستخدم vmin/vmax الضلع الأصغر/الأكبر. وتُقرَّب النتائج إلى 4 منازل عشرية.
حالات الاستخدام الشائعة
- تحويل أحجام px في نظام تصميم إلى rem
- معرفة حجم 5vw على حاسوب محمول بعرض 1440px
- تحويل أحجام الطباعة بـ pt أو mm إلى px في CSS
- حساب قيم em لمكوّن بخط أب حجمه 20px
الأسئلة الشائعة
لماذا 1rem تساوي 16px؟
تضبط المتصفحات حجم الخط الجذري افتراضيًا على 16px. إذا كان CSS لديك يضبط html { font-size: 62.5% } فأدخل 10 كحجم للخط الجذري.
ما الفرق بين rem وem؟
rem نسبية إلى حجم خط الجذر (html)؛ وem نسبية إلى حجم خط العنصر الأب، لذا تتراكم عند التداخل.
هل cm وin أحجام فيزيائية على الشاشة؟
لا. يثبّت CSS أن 1in = 96px، فعلى معظم الشاشات لا يكون سنتيمتر CSS سنتيمترًا حقيقيًا بدقة. وهي دقيقة في الطباعة.