straighten محول PX ↔ REM ↔ EM ↔ PT star

كيف يعمل التحويل

rem = px ÷ حجم الجذر (16px افتراضيًا، أي أن 24px = 1.5rem)؛ تعمل em بالطريقة نفسها لكن بالنسبة إلى حجم الخط الموروث الخاص بالعنصر نفسه — حقل "حجم السياق" في المحول؛ أما pt فهي وحدة الطباعة، حيث 1pt = 1.333px (96dpi ÷ 72). اكتب في أي حقل وستتحدّث بقية الحقول تلقائيًا.

مثال محسوب: على أساس جذر 16px، يُعرض عنوان بحجم 1.25rem عند 20px. ضع تسمية بحجم 0.875em داخل مكوّن حجم خطه الخاص 1.125rem (18px)، فتُعرض عند 15.75px — لأن em تتراكم بالنسبة إلى الأب المباشر، لا بالنسبة إلى الجذر.

ما ينبغي معرفته

• rem نسبية إلى العنصر الجذر، لا إلى قيمة افتراضية ثابتة للمتصفح. افتراض الـ16px لا يصحّ إلا إذا لم يُغيّره أحد. إذا زاد المستخدم حجم الخط الافتراضي لمتصفحه من إعدادات إمكانية الوصول — وهو أمر شائع بين ذوي ضعف البصر — فإن كل قيمة قائمة على rem تكبر تناسبيًا معه. أما قيم البكسل فلا تتغير: تبقى فقرة بحجم 16px عند 16px مهما كان تفضيل المستخدم في المتصفح.
• لهذا السبب تُفضّل إرشادات إمكانية الوصول استخدام rem لحجم الخط والمسافات. التصميم المبني بوحدة rem يحترم حجم النص الذي يختاره المستخدم من البداية إلى النهاية — العناوين، ونص المتن، والمسافات المحيطة بها، كلها تكبر معًا، فيبقى التصميم متناسبًا بدلًا من أن ينكسر عند تكبير النص.
• em نسبية إلى تداخلها الخاص، وهذا يتراكم. قيمة 1.5em داخل عنصر حجمه هو نفسه 1.5em تُعرض عند 2.25 ضعف الجذر — وهذا مفيد للمكوّنات التي يجب أن تتحجّم مع سياق حجم خطها الخاص (مثل حشوة الأزرار)، لكنه محفوف بالمخاطر لأي شيء متداخل على عدة مستويات.
• حيلة "62.5٪" القديمة — ضبط الجذر على 10px بحيث يصبح 1rem = 10px، لتسهيل الحساب الذهني — ما زالت تعمل، لكن يُستحسن تجنّبها في المشاريع الجديدة: معظم مكتبات المكوّنات تفترض جذرًا بحجم 16px، وتغييره قد ينتج أحجامًا غير متوقعة في أكواد الطرف الثالث.
• pt مُعرَّفة بالنسبة إلى px، لا العكس. يثبّت CSS النسبة عند 1in = 96px = 72pt، أي أن 1pt = 96/72 = 1.333px بالضبط. يهم هذا بشكل أساسي عند تصدير تصميم للطباعة أو PDF، حيث تكون pt هي الوحدة الأصلية — ويحافظ هذا التحويل على اتساق الأحجام بين الشاشة والطباعة.