Softonic

محوّل EM إلى REM

خطوة 1 / 2 rem
النتائج

يُرسل المصمم لك مواصفات Figma بوحدة البكسل، بينما تعتمد قاعدة الكود على وحدة الـrem، ويُدرج نصف المكونات هذه الوحدات في مواقع تتغير مواقعها وفقًا لحجم الخط الأم. يحسب هذا المحول ما يعادل كل قيمة em بوحدتي px وrem عند أي حجم للخط الأساسي، مما يسمح لك بنسخ القيمة الصحيحة مباشرة إلى ملف CSS دون الحاجة إلى إعادة الحساب داخليًا في كل مرة.

كيفية تحويل الوحدات em وrem والبكسلات

  1. 1

    قم بتحديد حجم الخط الأساسي

    عادةً ما يكون الحجم 16 بيكسل، وهو القيمة الافتراضية في المتصفح. وتستخدم بعض أنظمة التصميم مقادير مثل 14 أو 18 بيكسل كقيمة أساسية.

  2. 2

    لتحديد حجم خط الوالد

    قيمة "em" تُحسب بالنسبة إلى العنصر الأم؛ فإذا كان حجم العنصر الأم 20 بيكسل، فإن 1 em تعادل 20 بيكسل.

  3. 3

    أدخل قيمة

    بوحدة em، يتم تحديث قيمتي px وrem تلقائيًا.

  4. 4

    اقرأ عملية التحويل

    قيم px وem وrem مع عرض الكسور العشرية المقرّبة والدقيقة.

الصيغ

يكون rem دائمًا نسبيًا بالنسبة إلى العنصر الجذري (<html>):

px = rem * root_font_size rem = px / root_font_size

يُحسب em بالنسبة إلى العنصر الأم للعنصر الحالي:

px = em * parent_font_size em = px / parent_font_size

التحويلات عند جذر بحجم 16 بكسل

البكسل rem em (عند عنصر أب بحجم 16 بكسل)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

متى تستخدم كل وحدة

  • px: الحدود، والتفاصيل الدقيقة، والتحكم الدقيق. ظل بعرض 1px، حد بعرض 1px.
  • rem: الهوامش، والحشو، والطباعة التي يجب أن تتكيّف مع تفضيلات المستخدم للخط.
  • em: المسافات المحلية للمكوّن التي تتكيّف مع حجم خطه الخاص (الأزرار، الشارات).
  • % وvw/vh: نسبيًا إلى الحاوية وإلى نافذة العرض؛ موضوع منفصل.

حيلة 62.5٪

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

فخ توارث em

تُورَّث وحدة em عبر التسلسل. إذا كان لعنصر أب حجم خط 1.2em نسبةً إلى أبيه، وداخله حشو بقيمة 1em، فإن الحشو يساوي 1.2 × 1.2 = 1.44 × الجذر. تتضاعف وحدات em المتداخلة، مما قد يُنتج نتائج مفاجئة. وتتجنب rem ذلك لأنها تُحسب دائمًا نسبةً إلى <html>.

مثال على مقياس الطباعة

مقياس طباعة معياري شائع بنسبة 1.25:

المستوى rem البكسل (عند جذر 16)
التسمية التوضيحية 0.75 12
المتن 1 16
المتن+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
العنوان البارز 3.052 ~49

استخدام rem يعني أن كل مستوى يتكيّف نسبيًا إذا رفع المستخدم حجم خط متصفحه لأغراض إمكانية الوصول.

احترام تفضيلات المستخدم

ترميز px ثابتًا عبر ملف الأنماط يكسر تجربة المستخدمين الذين يكبّرون النص لأسباب بصرية. أما rem فيراعي هذه التفضيلات لأنه يُحسب نسبةً إلى الحجم الأساسي الذي يمكن للمستخدم تغييره. ولهذا السبب تحديدًا توصي أدلة الأسلوب باستخدام rem للطباعة والمسافات.

الأسئلة الشائعة

استخدم الوحدة rem لتحديد حجم الخطوط، والمسافات، وتصميم التخطيط. استخدم الوحدة em للقيم الداخلية للمكونات التي يجب أن تتغير تلقائيًا مع حجم خط المكون نفسه (مثل الأزرار والرموز داخل النص). واستخدم الوحدة px فقط للتفاصيل الدقيقة التي لا ينبغي أن تتغير من حيث الحجم.

يمكن للمستخدمين تغيير حجم الخط الافتراضي في متصفحهم؛ فمتصفح كروم يُحدد هذا الحجم تلقائيًا بـ 16 بكسل، وإذا حدد المستخدم قيمة 18 بكسل، فإن جميع العناصر المرتبطة بالتصميم ستكون أكبر بنسبة 12.5%. غالبًا ما يغفل المصممون الذين يفترضون أن حجم الخط الأساسي ثابتًا عند 16 بكسل هذه النقطة، لكن نظام Rem يحترم هذا الاختيار، وهذا بالضبط هو الغرض من استخدامه.

تستخدم مقياس المسافة في برنامج Tailwind وحدة الـ rem؛ حيث يساوي القيمة الافتراضية لـ text-base قيمة 1 rem = 16 بكسل، بينما تبلغ قيمة text-lg 1.125 rem. يتميز هذا المقياس بالاتساق ويراعي حجم الخط الأساسي بشكل افتراضي منذ التهيئة.

لا. تُستخدم الأرقام التي تدخلها فقط لحساب التحويل، ولا يتم حفظ أي شيء.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق HTML

نسّق HTML محلياً في المتصفح بمسافة بادئة من مسافتين أو أربع مسافات. لا يُرفع HTML ولا يُتحقق منه.

محاكي عدّاد البرنامج

تتبّع قائمة مبسطة من التعليمات ثابتة الطول عبر التسميات والتفرعات والقفزات والاستدعاءات والعودة وعناوين 16 أو 24 أو 32 بت.

الأداة متاحة بلغات أخرى