محوّل PX إلى REM

كيفية استخدام محوّل PX إلى REM

1. اضبط حجم خط الجذر (px). وهو 16 في كل المتصفحات الرئيسية ما لم يغيّره ملف الأنماط لديك. وتنقلك الأزرار أسفل الحقل إلى 16 px أو 10 px (حيلة html { font-size: 62.5%; }) أو 18 px.
2. إذا كنت تعمل بوحدة em، فاضبط حجم خط العنصر الأب لـ em (px): أي حجم الخط المحسوب للعنصر الذي يحتوي على العنصر الذي تنسّقه.
3. في قسم تحويل قيمة، اكتب في بكسل (px) أو REM أو EM. يتحدّث الحقلان الآخران أثناء الكتابة، ويعرض السطر أدناه عملية القسمة المستخدمة.
4. يسرد جدول تحويل جماعي الأحجام الشائعة. استبدل قيم البكسل بقيم نظام التصميم الخاص بك (سلّم المسافات، سلّم أحجام الخطوط…) واستخدم نسخ الجدول للصق النتيجة في جدول بيانات أو مستند تصميم.
5. لترحيل شيفرة موجودة، الصقها في شيفرة CSS المراد تحويلها، واختر الخيارات، ثم اضغط تحويل px إلى rem. ويعرض زر تحميل مثال ملف أنماط صغيرًا. انسخ شيفرة CSS المحوّلة بالضغط على نسخ.

المعادلات

• rem = px ÷ حجم خط الجذر. مع القيمة الافتراضية 16 px: ‏24px = 24 ÷ 16 = 1.5rem.
• em = px ÷ حجم خط العنصر الأب. داخل عنوان بحجم 20 px: ‏10px = 0.5em.
• px = rem × حجم خط الجذر، وpx = em × حجم خط العنصر الأب.

rem أم em: أيهما أستخدم؟

تشير rem («root em») دائمًا إلى حجم خط العنصر html، فالقيمة 1.5rem تعني الشيء نفسه في كل مكان من الصفحة. وهي الخيار الأكثر أمانًا لأحجام الخطوط والمسافات والعرض الأقصى والفجوات في التخطيط.

أما em فتشير إلى حجم خط العنصر نفسه (وفي الخاصية font-size إلى حجم خط الأب). وهي تتراكم: فقائمة بحجم 0.9em متداخلة ثلاث مرات تنتهي عند 0.9 × 0.9 × 0.9 = 73 % من الأساس. وهذا يجعل em مفيدة للعناصر التي ينبغي أن تتناسب مع نصها الخاص (حشوة الزر، وحجم الأيقونة بجانب التسمية)، ومحفوفة بالمخاطر للطباعة العامة في الموقع.

لماذا تهمّ rem لإمكانية الوصول؟

يرفع كثير من الناس حجم الخط الافتراضي في إعدادات متصفحهم (من 16 إلى 20 أو 24 px مثلًا) بدلًا من تكبير كل صفحة. والأحجام المكتوبة بوحدة px تتجاهل هذا التفضيل، أما الأحجام بوحدة rem أو em فتتبعه. واستخدام rem للنصوص والمسافات يتيح للتخطيط كله أن يكبر وفق اختيار القارئ، وهذا يساعد على استيفاء معيار النجاح 1.4.4 في WCAG 2.2 (تكبير النص حتى 200 %).

وللسبب نفسه، تجنّب ضبط html { font-size: 16px; } بوحدة px: استخدم نسبة مئوية (100%، أو 62.5% إذا أردت أن تساوي 1rem عشرة بكسلات) ليبقى إعداد المستخدم ساريًا.

ماذا يغيّر محوّل CSS؟

يستبدل الأرقام المتبوعة بـ px في التعريفات بالقيمة مقسومةً على حجم خط الجذر. ولا يمسّ أبدًا التعليقات أو السلاسل النصية أو قيم url().

• إبقاء عرض الحدود والإطار الخارجي بوحدة px: تبقى border وborder-*-width وoutline وoutline-offset وcolumn-rule بوحدة px، فتظل الخطوط الرفيعة حادة. أما border-radius فتُحوَّل.
• إبقاء قيم 1px: تبقى أي قيمة بين ‎−1px و1px كما هي.
• تحويل استعلامات الوسائط إلى em (أساس 16px): في شروط @media تشير rem وem دائمًا إلى حجم الخط الأولي للمتصفح، لا إلى قاعدة html الخاصة بك، ولذلك تقسم الأداة على 16 وتكتب em هناك أيًّا كان حجم الجذر لديك. وعند إلغاء التحديد، تحتفظ استعلامات الوسائط بقيم px.