محوّل وحدات CSS (px ↔ rem ↔ em ↔ pt)

حوّل بين وحدات CSS المختلفة. حدد حجم الخط الجذري لمشروعك للحصول على حسابات rem دقيقة. أداة أساسية لمطوري الواجهات الأمامية.

الميزات

تخصيص حجم الخط الجذري
px ↔ rem ↔ em ↔ pt
إخراج مقتطف CSS جاهز

طريقة الاستخدام

1. حدد حجم الخط الجذري (الافتراضي 16px).

2. اكتب قيمة في أي حقل وحدة.

3. تتحدث جميع الوحدات الأخرى تلقائياً.

حول هذه الأداة

من السهل فهم البكسلات، لكن وحدات rem تتغير مع حجم الخط المفضّل لدى المستخدم، وهذا مهم لإتاحة الوصول. يُبقي هذا المحوّل وحدات px وrem وem وpt متزامنة استنادًا إلى حجم خط جذري تختاره، وهو 16px افتراضيًا، أي المعيار في المتصفحات. اكتب قيمة في أي حقل فتتحدث البقية، لتحوّل تصميمًا مسلَّمًا بالبكسل إلى rem في ورقة الأنماط، أو لتعرف ما يعادله حجم طباعة 12pt على الشاشة. يفترض التحويل أن em تُقاس بالنسبة إلى الحجم الأساسي نفسه الذي تُقاس به rem، وهذا صحيح للعناصر التي يستخدم أصلها حجم الخط الجذري، أما المكوّنات المتداخلة ذات أحجام الخطوط الخاصة فستختلف قيمها.

الأسئلة الشائعة

ما الفرق بين rem وem؟
‏rem نسبية إلى حجم خط العنصر الجذري، لذا فإن 1rem متساوية في كل مكان من الصفحة. أما em فنسبية إلى حجم خط العنصر الأب، لذا تتضاعف في العناصر المتداخلة. ويتعامل هذا المحوّل مع em على أنها نسبية إلى الحجم الجذري الذي تدخله.
لماذا أستخدم rem بدلًا من px لأحجام الخطوط؟
إذا كبّر الزائر حجم الخط الافتراضي في إعدادات متصفحه، يكبر النص المحدد بـ rem معه، بينما يتجاهل النص المحدد بـ px هذا التفضيل. استخدام rem للخطوط والمسافات يجعل الموقع أكثر راحة لضعاف البصر.
كيف تُحوَّل النقاط إلى بكسلات؟
تعرّف CSS البوصة الواحدة بأنها 96px و72pt، لذا تساوي 1pt مقدار 4/3 px (نحو 1.333px). وبالتالي فإن خطًا بحجم 12pt يساوي 16px.
هل أغيّر حجم الخط الجذري إلى 62.5%؟
ضبط html { font-size: 62.5% } يجعل 1rem تساوي 10px، ما يبسّط الحساب لكنه يصغّر النص الافتراضي ويتطلب التعويض في كل مكان. كثير من الفرق اليوم تُبقي الحجم الافتراضي 16px وتستخدم محوّلًا كهذا بدلًا من ذلك.
هل يساوي 1px في CSS بكسلًا فعليًا واحدًا على الشاشة؟
ليس على الشاشات عالية الكثافة. بكسل CSS وحدة مرجعية، وعلى جهاز نسبة بكسلاته 2 يُرسم بكسل CSS الواحد باستخدام بكسلين فعليين في كل اتجاه.

أدوات ذات صلة