محوّل وحدات CSS — px وrem وem وpt و% أونلاين
أدخل أي قيمة CSS بـ px أو rem أو em أو pt أو %، وشاهد فوراً المكافئ في جميع الوحدات الأخرى. اضبط حجم الخط الأساسي المخصص (الافتراضي 16px) لتحويلات rem وem دقيقة. تتحدث جميع الحسابات في الوقت الفعلي دون إعادة تحميل الصفحة.
الأساس: 16px. بالنسبة لـ rem/em، 1 وحدة = 16px على المستوى الجذري.
كيف تعمل
لماذا تُعدّ وحدات CSS مهمة في التصميم التجاوبي
يقدم CSS فئتين واسعتين من وحدات الطول: المطلقة (px وpt وcm وmm) والنسبية (rem وem و% وvw وvh). للوحدات المطلقة حجم فيزيائي ثابت بصرف النظر عن السياق؛ أما الوحدات النسبية فتتوسع بالنسبة لشيء آخر: حجم الخط الجذري أو حجم خط العنصر الأب أو أبعاد منفذ الرؤية. يُحدد اختيار النوع الصحيح من الوحدات ما إذا كان تخطيطك يتكيف بأناقة مع أحجام الشاشات المختلفة وتفضيلات خطوط المستخدمين ومستويات التكبير.
تبقى وحدة البكسل (px) الأكثر شيوعاً في CSS لكونها متوقعة ودقيقة، إلا أنها لا تحترم إعداد حجم الخط في متصفح المستخدم. سيرى المستخدم الذي رفع حجم خطه الافتراضي إلى 20px لأسباب إمكانية الوصول أن النص المعتمد على px لا يتغير، بينما يتوسع النص المعتمد على rem وفقاً لذلك. لهذا السبب يُستوفى معيار النجاح 1.4.4 من WCAG 2.1 (تغيير حجم النص) بأيسر طريقة عند استخدام وحدات نسبية كـ rem لأحجام الخطوط.
px مقابل rem مقابل em: متى تستخدم كل منها
rem (جذر em) نسبي إلى حجم خط العنصر الجذري، وهو 16px افتراضياً في جميع المتصفحات. لأن rem مرتبط بنقطة مرجعية ثابتة واحدة (عنصر <html>)، يتجنب تأثير التراكم الذي يعانيه em. استخدم rem لأحجام الخطوط وتباعد المكونات وأي قيمة ينبغي أن تتوسع مع تفضيلات خط المستخدم. الصيغة الاعتيادية: rem = px ÷ الأساس، أي 24px ÷ 16 = 1.5rem.
em نسبي إلى حجم خط العنصر الحالي، الذي قد يكون هو نفسه محدداً بـ em، مما يخلق سلسلة تراكمية. يُعطي `font-size: 1.2em` على عنصر ابن داخل أب يحمل `font-size: 1.2em` ناتجاً يساوي 1.44 ضعف الحجم الجذري (1.2 × 1.2). يجعل هذا em مفيداً للمسافات التي ينبغي أن تتوسع مع حجم الخط المحلي (padding وmargin داخل المكون)، لكنه صعب التوقع في التخطيط العام. pt (النقاط) مفيد أساساً لتصميم الطباعة: 1pt = 1/72 بوصة، و72pt = 1 بوصة ≈ 96px على الشاشة.
اختيار حجم الخط الأساسي والعمل مع أنظمة التصميم
تضع معظم المتصفحات 16px افتراضياً كحجم للخط الجذري، ولهذا 1rem = 16px في الإعداد الافتراضي للمحوّل. يضبط بعض المطورين `html { font-size: 62.5%; }` لجعل 1rem = 10px، مما يُبسّط الحساب الذهني (24px = 2.4rem بدلاً من 1.5rem). هذه التقنية مثيرة للجدل لأنها تستوجب إعادة ضبط أحجام الخطوط في كل مكان وقد تتعارض مع تفضيلات إمكانية الوصول.
تستخدم أنظمة التصميم الحديثة (Material Design وApple HIG وTailwind CSS) مقياساً معيارياً للتباعد والطباعة، يعتمد عادةً مضاعفات 4px أو 8px. العمل بهذه الوحدات والتحويل إلى rem يضمن إيقاعاً بصرياً متسقاً في سياقات مختلفة. يستخدم المقياس الافتراضي لـ Tailwind مثلاً 4px = 1 وحدة، لذا قيمة 4 (16px) تساوي 1rem. في حالة الشك، حافظ على أساسك عند 16px واستخدم هذا المحوّل لقيم rem دقيقة دون حساب ذهني.
أسئلة شائعة
›كيف أحوّل px إلى rem؟
اقسم قيمة البكسل على حجم الخط الجذري. مع الأساس الافتراضي 16px: rem = px ÷ 16. إذاً 24px = 1.5rem، و32px = 2rem، و48px = 3rem. إذا كان حجم الخط الجذري 10px (من `html { font-size: 62.5%; }`), فـ rem = px ÷ 10.
›ما هو حجم الخط الافتراضي في المتصفح؟
جميع المتصفحات الرئيسية تضع 16px افتراضياً لحجم الخط الجذري ما لم يغيّر المستخدم تفضيلاته. هذا يعني أن 1rem = 16px في الإعداد الافتراضي. يرفع بعض المستخدمين هذه القيمة لأسباب إمكانية الوصول — سبب رئيسي لاستخدام rem بدلاً من px للنص.
›ما الفرق بين rem وem؟
rem دائماً نسبي إلى حجم خط العنصر الجذري (<html>)، مما يجعله متوقعاً. em نسبي إلى حجم خط العنصر الحالي الذي قد يتغير عبر الوراثة. استخدم rem للقيم العامة (حجم خط الجسم وتخطيط الصفحة) وem للقيم التي ينبغي أن تتوسع مع السياق المحلي (padding نسبةً إلى حجم خط العنصر نفسه).
›كم بكسلاً يساوي 1rem؟
افتراضياً، 1rem = 16px. بضبط `html { font-size: 20px }` يصبح 1rem = 20px. بضبط `html { font-size: 62.5% }` (نسبةً إلى الافتراضي 16px) يصبح 1rem = 10px. يتيح لك حقل الأساس في هذا المحوّل تغيير الحجم الجذري المفترض.
›هل أستخدم rem أم px لأحجام الخطوط؟
استخدم rem لأحجام الخطوط كلما أمكن. النص المعتمد على rem يحترم تفضيل حجم الخط لدى المستخدم في المتصفح، وهو مهم لإمكانية الوصول. البكسل يتجاهل إعداد المتصفح، مما يعني أن المستخدم الذي يحتاج نصاً أكبر لن يستفيد من التكبير (قبل تقديم تكبير المتصفح).
›كيف أحوّل px إلى pt؟
1 نقطة = 1/72 بوصة = 1.333 بكسل على الشاشة. للتحويل: pt = px × 0.75. إذاً 16px = 12pt. تُستخدم النقاط أساساً في CSS الطباعة وعند استهداف وسائط فيزيائية كـ PDF أو أوراق أنماط الطباعة.
›ماذا تعني % في وحدات CSS؟
النسبة المئوية في CSS تعتمد على السياق. بالنسبة لـ font-size، 100% = حجم الخط الموروث (نفس 1em). بالنسبة لـ width/height، 100% = حجم الكتلة الحاوية. في هذا المحوّل، نتعامل مع % كنسبة مئوية من حجم الخط الأساسي، أي 100% = الأساس px، و150% = 1.5 × الأساس.
›ما هي حيلة الـ 62.5%؟
ضبط `html { font-size: 62.5%; }` يجعل 1rem = 10px (لأن 62.5% من الافتراضي 16px = 10px). يُبسّط هذا حساب rem: يصبح 24px هو 2.4rem بدلاً من 1.5rem. لكنه يستوجب إعادة ضبط أحجام الخطوط في كل CSS وقد يكسر مكونات جهات خارجية. رموز التصميم الحديثة والأدوات جعلت هذه الحيلة أقل ضرورة.
أدوات ذات صلة
آخر تحديث: