محول وحدات CSS (px / rem / em / pt)
حوّل قيمة بين البكسل وrem وem والنقاط مباشرة في متصفحك.
كيف يعمل
الاستخدام النموذجي في تكامل الواجهة الأمامية: يعبّر تصميم Figma عن جميع الأحجام بالبكسل (16px، 24px، 32px...)، لكن أفضل ممارسات إمكانية الوصول توصي باستخدام وحدات نسبية مثل rem في CSS، بحيث يتكاثف النص بشكل صحيح عند زيادة المستخدم لحجم الخط الافتراضي في متصفحه. أدخل القيمة بالبكسل التي قرأتها من التصميم، واختر «px» إلى «rem» مع حجم الخط الأساسي المعتاد للموقع (16px افتراضيًا)، والصق النتيجة مباشرة في CSS الخاص بك.
لماذا يلزم حجم الخط الأساسي؟
rem وem وحدتان نسبيتان: 1rem يساوي حجم خط العنصر الجذري (html)، بينما 1em يساوي حجم خط العنصر الحالي. دون معرفة هذا الحجم المرجعي (عادةً 16px افتراضيًا في المتصفح، لكن قد تُعدّله ورقة الأنماط)، يستحيل التحويل إلى px أو منه. لذلك تطلب منك هذه الأداة تحديد حجم الخط الأساسي لاستخدامه كمرجع.
ما الفرق بين rem وem؟
rem (« root em ») يُحسب دائمًا بالنسبة إلى حجم خط العنصر الجذري للمستند، مما يجعله متوقعًا في كل مكان في الصفحة. أما em فُيحسب بالنسبة إلى حجم خط العنصر الأصل الأقرب، مما قد يؤدي إلى التراكم. تعالج هذه الأداة كليهما بالطريقة نفسها، باستخدام الحجم الأساسي الذي تحدده كمرجع مشترك.
تتم عملية التحويل بالكامل في متصفحك بواسطة WebAssembly: لا يتم إرسال قيمك أبدًا إلى أي خادم.