كيفية الاستخدام
- اضبط حجم خط الجذر إذا كان موقعك يغيّره (مثلًا، يجعل html { font-size: 62.5% } الحجم 10px).
- أدخل قيمة في أي من المربعين للتحويل من px إلى rem أو من rem إلى px. انتقل إلى em إذا كنت تريد أن تكون القيمة نسبية إلى عنصر أب.
- استخدم الجدول للعثور على القيم بسرعة، أو الصق مقطع CSS لتحويل جميع أطوال px دفعة واحدة ثم انسخ النتيجة.
كيف تعمل الأداة
rem = px ÷ حجم خط الجذر. عند استخدام حجم الجذر الافتراضي 16px، تساوي 24px مقدار 1.5rem، وتساوي 14px مقدار 0.875rem. تستخدم em الصيغة نفسها، لكن مع حجم خط العنصر الأب، لذلك تتضاعف قيم em المتداخلة. أما rem فتتجنب ذلك لأنها تشير دائمًا إلى الجذر.
يتيح استخدام rem لأحجام الخطوط والمسافات تكبير النص عند زيادة المستخدم حجم الخط الافتراضي في إعدادات المتصفح، ما يساعد الأشخاص ضعاف البصر. تُقرّب القيم إلى أربع منازل عشرية.
يحوّل محوّل المقاطع الأرقام التي يليها px. ويترك التعليقات وurl(…) والنصوص الموضوعة بين علامتي اقتباس دون تغيير، ويُبقي 1px إذا طلبت ذلك (من الأفضل عادةً أن تظل الحدود الرفيعة 1px)، ويحوّل 0px إلى 0. افتراضيًا، يترك شروط @media و@container كما هي، لأن rem وem في استعلامات الوسائط تشير دائمًا إلى حجم الخط الأولي للمتصفح، بصرف النظر عن حجم الخط الذي تضبطه للجذر. لا يفسّر دلالات calc() بما يتجاوز استبدال أرقام px داخله، وهذا صحيح لأن كل قيمة طول تُحوّل على حدة.
أمثلة
حجم الجذر الافتراضي
مع حجم جذر 16px: 12px = 0.75rem، و20px = 1.25rem، و32px = 2rem، و0.5rem = 8px.
حيلة 62.5%
إذا ضبطت في CSS قيمة html { font-size: 62.5% }، فسيكون حجم الجذر 10px، وبالتالي تساوي 14px مقدار 1.4rem، وتساوي 24px مقدار 2.4rem. اضبط حقل حجم خط الجذر على 10 لتطابق ذلك.
تحويل مكوّن
يتحوّل padding: 24px 16px; border: 1px solid #ddd; إلى padding: 1.5rem 1rem; border: 1px solid #ddd; عند تفعيل خيار «الإبقاء على قيم 1px».
الأسئلة الشائعة
هل أستخدم rem أم em؟
استخدم rem لمعظم أحجام الخطوط والمسافات والتخطيط، لأنه يعطي نتائج متوقعة في كل الحالات. واستخدم em عندما تريد أن يتناسب شيء ما مع حجم خط المكوّن نفسه، مثل الحشو داخل زر.
لماذا لا تُحوّل استعلامات الوسائط إلى rem؟
يمكنك ذلك، لكن 1rem في استعلام الوسائط يساوي دائمًا حجم الخط الافتراضي للمتصفح (عادةً 16px)، وليس حجم الخط الذي ضبطته في html. لذلك يتخطّاها المحوّل افتراضيًا؛ أوقف الخيار إذا كنت ستقسم على 16 على أي حال.
هل rem أفضل لإمكانية الوصول من px؟
نعم، بالنسبة إلى أحجام الخطوط: تحترم rem إعداد المستخدم لحجم الخط الافتراضي، بينما تتجاهله أحجام الخطوط بوحدة px. يعمل تكبير المتصفح مع الوحدتين.
الخصوصية
تُجرى التحويلات ومعالجة مقطع CSS في متصفحك، ولا تُرسل إلى أي جهة.