محوّل وحدات CSS: px وrem وem وpt وvw وvh

1. 01أدخل القيمة واختر وحدتهااكتب الرقم واضغط وحدته، مثل 24 بوحدة px.
2. 02اضبط السياقحجم خط الجذر وحجم خط العنصر بالبكسل، وعرض نافذة العرض وارتفاعها، بحسب مشروعك.
3. 03اقرأ كل الوحداتتظهر القيمة بالوحدات الست، والوحدة التي اخترتها بخط بارز.

• من التصميم إلى الشيفرةتحويل مقاسات Figma بالبكسل إلى rem في ملفات الأنماط.
• تصميم متجاوبمعرفة ما تعنيه vw وvh بالبكسل على أحجام شاشات مختلفة.
• مستندات الطباعةتحويل النقاط المستخدمة في الطباعة وبرامج النصوص إلى بكسل.

• 24pxمع خط جذر 16 تساوي 1.5rem و18pt، و1.25vw على شاشة عرضها 1920.
• 12ptتساوي 16px بالضبط، لأن البكسل في CSS ثلاثة أرباع النقطة.
• 1.5rem مع خط جذر 10حين يُضبط الجذر على 10 بكسل تصبح 1.5rem مساوية 15px، وهي الحيلة التي تسهّل الحساب الذهني في بعض المشاريع.
• 50vwنصف عرض نافذة العرض: 960px على شاشة عرضها 1920، أي 60rem مع خط جذر 16.

• فضّل rem للخطوطالخط بوحدة rem يكبر مع إعداد حجم الخط في المتصفح، فيبقى النص مقروءاً لمن يكبّره، بخلاف px.
• انتبه لتراكم emem نسبية إلى خط العنصر نفسه، فخط 1.2em داخل عنصر خطه 1.2em يصير ⁦1.2 × 1.2 = 1.44⁩ من خط العنصر الخارجي.

تحوّل الأداة القيمة أولاً إلى بكسل ثم إلى كل وحدة. rem تساوي البكسل مقسوماً على خط الجذر، وem البكسل مقسوماً على خط العنصر، وpt البكسل مضروباً في 0.75 لأن البوصة في CSS تساوي 96 بكسل و72 نقطة. وvw البكسل مقسوماً على عرض النافذة مضروباً في 100، ومثلها vh بالارتفاع.

rem ترجع دائماً إلى خط عنصر الجذر html، فقيمتها ثابتة في الصفحة كلها. أما em فترجع إلى خط العنصر نفسه، فتتغير بحسب مكان العنصر. لذلك يستعمل كثيرون rem للخطوط والمسافات العامة، وem للمسافات التي يجب أن تكبر مع خط عنصر معين كالأزرار.

vw وvh تعتمدان على حجم النافذة لحظة العرض، والرقم هنا لحجم واحد تحدده. وبعض المتصفحات على الجوال تحسب vh مع شريط العنوان أو دونه، ولهذا ظهرت وحدات مثل dvh. والأداة لا تعرف خط الجذر في مشروعك ما لم تدخله.