ما الذي تفعله
تحوّل هذه الأداة أطوال CSS بين البكسل والوحدتين النسبيتين rem وem. اكتب قيمة واحدة مثل 24px لتحصل على 1.5rem، أو اكتب عدة قيم بواقع قيمة في كل سطر لتحويلها معًا، أو الصق ورقة أنماط كاملة فتُعاد كتابة كل قيمة px فيها في مكانها. يعرض الجدول المرجعي المقاسات الشائعة من 1px إلى 128px وفق حجمك الأساسي. لا يغادر شيء متصفحك.
طريقة الاستخدام
- الصق CSS أو اكتب قيمة في كل سطر. تُقرأ الأرقام بلا وحدة على أنها px (أو rem/em عند عكس الاتجاه)، والقيمة المكتوبة بالوحدة الأخرى تُحوَّل في الاتجاه المعاكس.
- اضبط حجم الخط الأساسي. القيمة الافتراضية في كل المتصفحات 16px، وبعض المشاريع تكتب
html { font-size: 62.5% }ليصبح 1rem = 10px. - اختر الاتجاه (px → rem أو rem → px) والوحدة (rem أو em) وعدد المنازل العشرية.
- عند الحاجة اضبط إبقاء px للقيم الأصغر من لتبقى حدود 1px والخطوط الرفيعة الأخرى بوحدة px.
- انسخ النتيجة بالزر الموجود فوقها.
مثال
/* before */
.title { font-size: 24px; margin-bottom: 12px; }
/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }القيم التي ليست px، مثل النسب المئوية والألوان وأسماء الملفات داخل url() وأسماء الأصناف مثل .mt-16px، تبقى دون تغيير. وتصبح 0px هي 0.
px وrem وem
- px وحدة مطلقة تتجاهل حجم الخط الذي يفضّله القارئ.
- rem («root em») مضاعف لحجم خط العنصر
html. إذا ضبط القارئ متصفحه على 20px يصبح 1rem مساويًا 20px ويتغير التخطيط كله معه. - em مضاعف لحجم خط العنصر الحالي. مفيدة للمسافات التي يجب أن تتبع نصها، لكن قيم em المتداخلة تتضاعف، ولهذا فإن rem هي الخيار الافتراضي الأكثر أمانًا.
تُحوَّل استعلامات الوسائط أيضًا: يصبح @media (min-width: 768px) هو 48rem (أو 48em)، فتبقى نقاط التوقف متسقة عندما يكبّر القارئ النص. في استعلامات الوسائط تشير rem وem كلتاهما إلى حجم الخط الافتراضي للمتصفح، لا إلى قاعدة html الخاصة بك.
الأسئلة الشائعة
› كيف أحوّل px إلى rem؟
اقسم القيمة بالبكسل على حجم خط العنصر الجذر. مع القيمة الافتراضية للمتصفحات 16px يكون 24px ÷ 16 = 1.5rem و12px ÷ 16 = 0.75rem. وللعكس اضرب: 2rem × 16 = 32px.
› ما الفرق بين rem وem؟
تُقاس rem نسبةً إلى حجم خط العنصر الجذر html، لذا يكون 1rem بالحجم نفسه في كل الصفحة. أما em فتُقاس نسبةً إلى حجم خط العنصر الحالي (أو العنصر الأب في خاصية font-size نفسها)، فتتضاعف عند تداخل العناصر. استخدم rem لمعظم المقاسات وem حين يجب أن يتغير شيء مع نصه الخاص، مثل الحشو الداخلي للزر.
› لماذا أستخدم rem بدلًا من px؟
عندما يكبّر القارئ حجم الخط الافتراضي من إعدادات المتصفح، تكبر المقاسات بوحدة rem معه بينما تبقى px ثابتة. تحافظ rem على إمكانية الوصول وتسمح بتكبير التصميم كله أو تصغيره بتغيير قيمة جذرية واحدة.
› هل أحوّل حدود 1px؟
عادةً لا. فالخط الرفيع بسماكة 0.0625rem قد يبدو ضبابيًا أو يختفي عند بعض مستويات التكبير. اضبط «إبقاء px للقيم الأصغر من» على 2px وسيترك المحوّل الحدود والقيم الصغيرة جدًا بوحدة px.