محول PX ↔ REM ↔ EM ↔ PT
حوّل وحدات CSS في الاتجاهين بحجم جذر قابل للتخصيص — تتحدث px وrem وem وpt معًا.
534 مشاهدة
كيف ترتبط الوحدات ببعضها؟
rem = px ÷ حجم الجذر (16 بكسل افتراضيًا، أي أن 24px = 1.5rem)؛ تعمل em بالطريقة نفسها لكن بالنسبة لحجم الخط الموروث الخاص بالعنصر نفسه — حقل "حجم السياق" في المحول؛ أما pt فهي وحدة الطباعة حيث 1pt = 1.333px (96dpi ÷ 72). اكتب في أي حقل وستتحدث البقية تلقائيًا.
قاعدة عملية: استخدم rem لأحجام الخطوط والمسافات كي يُقاس التصميم بحسب تفضيلات المستخدم لحجم الخط؛ واستخدم em للحشوات التي يجب أن تتبع نص عنصرها؛ واستخدم px فقط لما يجب ألا يتغير حجمه أبدًا (الحدود الشعرية). ضبط الجذر على 10px (حيلة الـ62.5% القديمة) يسهّل الحساب الذهني لكن يُفضَّل تجنّبه في المشاريع الجديدة — إذ تفترض مكتبات المكوّنات القيمة 16.
الأسئلة الشائعة
لماذا تختلف قيمة em لدي عن rem؟
تُضرَب em في أقرب حجم خط محدَّد، وتتراكم عند التداخل: فـ1.5em داخل عنصر بحجم 1.5em يساوي 2.25 ضعف الجذر. أما rem فتشير دائمًا إلى الجذر — وهذه القابلية للتنبؤ هي سبب انتشارها.
هل 1pt يساوي فعلاً 1.333px؟
في CSS نعم بحكم التعريف: 1in = 96px = 72pt. تتفق ملفات PDF المخصصة للطباعة مع CSS على هذه النسبة، رغم أن الحجم الفعلي يعتمد على دقة الشاشة الحقيقية (DPI).
أدوات مشابهة
الإبلاغ عن مشكلة
محول PX ↔ REM ↔ EM ↔ PT