محول بيكسل إلى REM إلى EM - آلة حاسبة وحدات CSS مجانية
قم بتحويل وحدات البيكسل إلى REM و EM فوريًا. محول وحدات CSS مجاني للتصميم المستجيب للويب. يدعم أحجام الخطوط المخصصة والحسابات الفورية للحصول على نتائج دقيقة.
محول وحدات PX، REM، و EM
تحويل بين وحدات البكسل (PX)، الجذر إم (REM)، والإم (EM). أدخل قيمة في أي حقل لرؤية القيم المكافئة في الوحدات الأخرى.
صيغ التحويل
- PX إلى REM: القيمة بالبكسل ÷ حجم الخط الجذري
- PX إلى EM: القيمة بالبكسل ÷ حجم خط العنصر الأصلي
- REM إلى PX: القيمة بالـ REM × حجم الخط الجذري
- EM إلى PX: القيمة بالـ EM × حجم خط العنصر الأصلي
التوثيق
محول وحدات PX، REM، و EM: شرح الوحدات الأساسية في CSS
لماذا يهم تحويل وحدات CSS في التطوير الويب الحديث
عند بناء مواقع استجابية، أحد أكثر التحديات شيوعًا هو ترجمة مواصفات التصميم إلى CSS مرنة وقابلة للتوسع. على الأرجح رأيت تصميمًا في Figma بـ "padding: 24px" وتساءلت عما إذا كنت ستحتفظ بها كبكسل أو تحولها إلى وحدات rem. هذا القرار يؤثر على كل شيء بدءًا من إمكانية الوصول وحتى كيفية استجابة التخطيط عندما يعدل المستخدمون حجم الخط في المتصفح.
يساعدك هذا محول وحدات PX، REM، و EM على الترجمة بسرعة بين هذه الوحدات الأساسية الثلاث في CSS. توفر وحدات البكسل تحكمًا دقيقًا - رائعة للحدود والتفاصيل الدقيقة. وحدات REM تتناسب مع حجم الخط الجذري، مما يجعلها مثالية للتباعد والتباين المتسق عبر موقعك بأكمله. وحدات EM تتناسب نسبيًا مع العنصر الأصلي، مثالية لإنشاء مكونات ذاتية الاحتواء تحافظ على النسب.
الجزء المعقد؟ التحويل بينها يتطلب مراعاة أحجام الخطوط، والتي تختلف بين العنصر الجذري والمكونات الفردية. الخطأ الشائع الذي أراه يرتكبه المطورون هو استخدام البكسل في كل مكان لأنه يبدو أبسط. وبينما يعمل ذلك في البداية، فإنه يخلق مشاكل في إمكانية الوصول عندما يزيد المستخدمون حجم الخط الافتراضي في المتصفح - حيث لا يتكيف التخطيط بشكل متناسب.
فهم وحدات CSS: البكسل (PX)، والريم (REM)، والإم (EM)
ما هي البكسل (PX)؟
البكسل (PX) يمثل أبسط وحدة CSS - ما تحدده هو ما تحصل عليه. البكسل في CSS هو وحدة مرجعية، وليس بالضرورة بكسل شاشة فعلي (خاصة على الشاشات عالية الدقة مثل شاشات Retina). توفر البكسل حجمًا ثابتًا لا يتغير بناءً على أحجام الخطوط أو العناصر الأصلية.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6متى تعمل البكسل بشكل جيد:
- الحدود والفواصل (الحدود بمقدار 1 أو 2 بكسل تبقى واضحة)
- التفاصيل الصغيرة والدقيقة التي لا ينبغي تغييرها
- الحاويات ذات العرض الثابت عندما تحتاج إلى أبعاد دقيقة
- أحجام الأيقونات عند العمل مع لوحات الصور بدقة البكسل
المشكلة: البكسل لا تحترم تفضيلات المستخدم. إذا زاد شخص ما حجم الخط الافتراضي في المتصفح من 16 بكسل إلى 20 بكسل للحصول على قراءة أفضل، فإن التخطيطات المعتمدة على البكسل تبقى دون تغيير، مما قد يؤدي إلى طغيان النص على الحاويات أو إنشاء مساحات مزدحمة.
ما هي وحدات الريم (REM)؟
وحدات الريم (root em) تتغير بناءً على حجم الخط للعنصر الجذر - عادة ما يكون عنصر <html>. معظم المتصفحات تفترض 16 بكسل، لذا 1 ريم يساوي 16 بكسل ما لم تغير حجم الخط الجذري. إليك ما يجعل وحدات الريم قوية: توفر تغييرًا متسقًا وقابلًا للتوقع عبر موقعك بأكمله.
1html {
2 font-size: 16px; /* الافتراضي في معظم المتصفحات */
3}
4
5.element {
6 width: 12.5rem; /* مكافئ لـ 200 بكسل مع حجم الخط الجذري الافتراضي */
7 font-size: 1rem; /* مكافئ لـ 16 بكسل */
8 margin: 0.625rem; /* مكافئ لـ 10 بكسل */
9}
10لماذا يفضل المطورون وحدات الريم:
- تغيير متسق: تغيير حجم الخط الجذري، وكل شيء يتغير بشكل متناسب
- الامتثال لإمكانية الوصول: عندما يعدل المستخدمون حجم الخط في المتصفح، تتكيف التخطيطات المعتمدة على الريم تلقائيًا
- صيانة أسهل: تحديث قيم المسافات في مكان واحد بدلاً من البحث عن القيم بالبكسل
- لا مشاكل تراكمية: على عكس وحدات الإم، وحدات الريم لا تتراكم عند تداخل العناصر
نصيحة احترافية من التجربة: اضبط حجم الخط الجذري على 62.5٪ (مما يجعل 1 ريم = 10 بكسل مع 16 بكسل كأساس). هذا يجعل الحساب الذهني أسهل - 1.6 ريم = 16 بكسل، 2.4 ريم = 24 بكسل. تذكر فقط ضبط حجم الخط للجسم مرة أخرى على 1.6 ريم حتى يكون النص الافتراضي 16 بكسل. وفقًا لمواصفات W3C للقيم والوحدات في CSS، تشير وحدات الريم دائمًا إلى العنصر الجذري، مما يجعلها قابلة للتوقع في التخطيطات المعقدة.
ما هي وحدات الإم (EM)؟
وحدات الإم تتغير بناءً على حجم الخط للعنصر الأصلي، مما يجعلها مدركة للسياق. هذا السلوك يختلف عن وحدات الريم، التي تشير دائمًا إلى الجذر. اسم "إم" يأتي من علم الطباعة - تاريخيًا كان يشير إلى عرض الحرف الكبير "M" في نوع الخط المعين.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* مكافئ لـ 16 بكسل (20 بكسل × 0.8) */
7 margin: 0.5em; /* مكافئ لـ 8 بكسل (16 بكسل × 0.5) */
8}
9متى تتألق وحدات الإم:
- التصميم القائم على المكونات: الحشو والهوامش التي تتغير مع حجم الخط
- الطباعة: ارتفاعات السطور تعمل بشكل جيد مع القيم بدون وحدات أو الإم (مثل
line-height: 1.5em) - الوحدات ذاتية الاكتفاء: الأزرار أو البطاقات التي تحافظ على النسب عند تغير حجم الخط
- استعلامات الوسائط: وفقًا لـ مستندات MDN Web، تشير وحدات الإم في استعلامات الوسائط إلى حجم الخط الافتراضي للمتصفح، وليس العنصر الأصلي
فخ التراكم: إليك المكان الذي يعلق فيه المطورون غالبًا. وحدات الإم تتراكم عبر العناصر المتداخلة، مما يمكن أن يؤدي إلى نتائج غير متوقعة:
1.level-1 { font-size: 1.2em; } /* 19.2 بكسل إذا كان الأصل 16 بكسل */
2.level-2 { font-size: 1.2em; } /* 23.04 بكسل (19.2 بكسل × 1.2) */
3.level-3 { font-size: 1.2em; } /* 27.65 بكسل (23.04 بكسل × 1.2) */
4بعد ثلاثة مستويات من التداخل، نما نصك بنسبة 73٪ بدلاً من 20٪ المقصودة. هذا هو السبب في أن العديد من المطورين تحولوا إلى وحدات الريم للطباعة بمجرد تحسن دعم المتصفح.
صيغ وحسابات التحويل
فهم العلاقات الرياضية بين وحدات PX، REM، و EM أمر حاسم للتحويلات الدقيقة. إليك الصيغ المستخدمة في أداة التحويل:
تحويل PX إلى REM
لتحويل البكسل إلى وحدات REM، اقسم قيمة البكسل على حجم الخط الجذري:
على سبيل المثال، مع حجم الخط الجذري الافتراضي 16px:
- 16px = 1rem
- 24px = 1.5rem
- 8px = 0.5rem
تحويل PX إلى EM
لتحويل البكسل إلى وحدات EM، اقسم قيمة البكسل على حجم خط العنصر الأصلي:
على سبيل المثال، مع حجم خط أصلي 16px:
- 16px = 1em
- 24px = 1.5em
- 8px = 0.5em
تحويل REM إلى PX
لتحويل وحدات REM إلى بكسل، اضرب قيمة REM في حجم الخط الجذري:
على سبيل المثال، مع حجم الخط الجذري الافتراضي 16px:
- 1rem = 16px
- 1.5rem = 24px
- 0.5rem = 8px
تحويل EM إلى PX
لتحويل وحدات EM إلى بكسل، اضرب قيمة EM في حجم خط العنصر الأصلي:
على سبيل المثال، مع حجم خط أصلي 16px:
- 1em = 16px
- 1.5em = 24px
- 0.5em = 8px
تحويل REM إلى EM
لتحويل وحدات REM إلى وحدات EM، تحتاج إلى مراعاة حجم الخط الجذري وحجم خط العنصر الأصلي:
إذا كان حجم الخط الجذري والأصلي متساويين (مثلاً 16px)، فإن 1rem = 1em.
تحويل EM إلى REM
لتحويل وحدات EM إلى وحدات REM، استخدم الصيغة التالية:
مرة أخرى، إذا كان حجمي الخط متساويين، فإن 1em = 1rem.
كيفية استخدام محول وحدات البكسل إلى REM إلى EM
الحصول على تحويلات دقيقة أمر بسيط مع هذه الأداة. المفتاح هو فهم أحجام الخطوط التي يجب استخدامها في حالتك المحددة.
دليل البدء السريع
- أدخل قيمتك في أي حقل—بكسل، REM، أو EM
- تحقق من النتائج فورًا في الوحدات الأخرى
- اضبط أحجام الخط لتتناسب مع مشروعك:
- حجم الخط الجذري: ما قمت بتعيينه على العنصر
<html>(عادة 16 بكسل) - حجم خط العنصر الأصلي: حجم الخط للعنصر الأصلي المحدد (أيضًا عادة 16 بكسل)
- حجم الخط الجذري: ما قمت بتعيينه على العنصر
- انسخ القيمة التي تحتاجها باستخدام زر النسخ
الحصول على نتائج دقيقة لمشروعك
يفترض المحول 16 بكسل لكل من حجم الخط الجذري والأصلي لأنه المعيار في المتصفح. لكن ما يهم هو: قد يستخدم مشروعك الفعلي قيمًا مختلفة.
العثور على حجم الخط الجذري: افتح أدوات المطور في المتصفح، وافحص عنصر <html>، وتحقق من حجم الخط المحسوب. إذا قمت بتعيين html { font-size: 62.5%; }، فإن حجم الخط الجذري سيكون 10 بكسل (62.5% من 16 بكسل).
العثور على حجم خط العنصر الأصلي: بالنسبة لتحويلات EM، تحتاج إلى حجم الخط للعنصر الأصلي المحدد حيث ستطبق النمط. افحص ذلك العنصر في أدوات التطوير لرؤية حجم الخط المحسوب. إذا كان العنصر الأصلي يحمل font-size: 1.2rem وكان الجذر 16 بكسل، فاضبط حجم خط العنصر الأصلي على 19.2 بكسل للحصول على حسابات EM الدقيقة.
سيناريوهات التحويل الشائعة
من التصميم إلى الكود: يظهر ملف Figma لديك padding: 24px. تريد استخدام وحدات REM لتحسين إمكانية الوصول. أدخل 24 في حقل البكسل، وسترى أنها تساوي 1.5 rem (بافتراض 16 بكسل جذري).
بناء مكون زر: تريد أن يتناسب الحشو مع حجم خط الزر. إذا كان الزر يحمل font-size: 1.125rem (18 بكسل)، اضبط حجم خط العنصر الأصلي على 18، وأدخل الحشو بالبكسل الذي تريده، واستخدم قيمة EM الناتجة.
الطباعة المستجيبة: تقوم بإنشاء عنوان بحجم 32 بكسل على سطح المكتب. أدخل 32 بكسل لترى أنها 2 rem، والتي ستتناسب بشكل مناسب عندما يعدل المستخدمون حجم الخط في المتصفح.
استخدامات تحويل وحدات CSS في العالم الواقعي
معرفة الصيغ شيء، وتطبيقها بفعالية في كود الإنتاج شيء آخر. وهنا يأتي دور تحويل الوحدات ليحدث فرقًا ملموسًا في مشاريعك.
تحويل ملفات التصميم إلى CSS متجاوب
عند استلام تصميم Figma محدد بوحدة البكسل. يظهر مكون البطاقة:
- التباعد: 24 بكسل
- حجم خط العنوان: 28 بكسل
- حجم خط المحتوى: 16 بكسل
- التباعد السفلي: 40 بكسل
تحويل هذه إلى وحدات REM (بافتراض 16 بكسل كأساس) يعطينا:
1.card {
2 padding: 1.5rem; /* 24px → 1.5rem */
3 margin-bottom: 2.5rem; /* 40px → 2.5rem */
4}
5
6.card__heading {
7 font-size: 1.75rem; /* 28px → 1.75rem */
8}
9
10.card__body {
11 font-size: 1rem; /* 16px → 1rem */
12}
13ما هي الفائدة؟ عندما يزيد مستخدم يعاني من ضعف البصر الحجم الافتراضي للخط في المتصفح من 16 بكسل إلى 20 بكسل، تتناسب بطاقتك تناسبيًا. يتمدد التباعد والهوامش والنص بنسبة 25%، مع الحفاظ على التوازن البصري للتصميم. مع قيم البكسل، سينمو النص فقط، مما يؤدي إلى كسر التخطيط.
[الترجمة تستمر بنفس الأسلوب والتنسيق للمحتوى المتبقي]
كيف تطورت وحدات CSS: من الثابتة إلى المرنة
التحول من البكسل إلى الوحدات النسبية يعكس رحلة الويب من المستندات الساكنة إلى التطبيقات سريعة الاستجابة. فهم هذا التاريخ يوضح سبب تحويلنا بين الوحدات اليوم.
عصر البكسل المثالي (1990-2000)
كانت المواقع الأولى مصممة لعروض شاشات محددة—640 بكسل، ثم 800 بكسل، ثم 1024 بكسل. استخدمت تخطيطات CSS البكسل حصريًا لأن مصممي الطباعة فهموا ذلك. بدت المواقع متطابقة عبر المتصفحات (عندما عملت)، لكنها انهارت تمامًا على أحجام الشاشات غير المتوقعة. تم التعامل مع الويب كالطباعة: ثابتًا، متحكمًا فيه، متوقعًا.
كانت وحدات EM موجودة في مواصفات CSS، موروثة من علم الطباعة، لكن معظم المطورين تجنبوها. كان السلوك التراكمي مربكًا، ولم تكن هناك أجهزة محمولة تجبرنا على التفكير بمرونة.
نداء الجوال المفاجئ (2007-2010)
غيّر iPhone كل شيء. فجأة، جاءت نسبة كبيرة من حركة المرور من شاشات عرضها 320 بكسل. ساعد التكبير/التصغير باللمس، لكن المواقع المصممة لشاشات سطح المكتب بعرض 1024 بكسل كانت مؤلمة على الجوال.
مقال إيثان مارسوت عن تصميم الويب سريع الاستجابة في 2010 جسّد نهجًا جديدًا: شبكات سائلة، صور مرنة، واستعلامات الوسائط. أصبحت الوحدات النسبية ضرورية، وليست اختيارية. لكن السلوك التراكمي لوحدات EM تسبب في أخطاء في التخطيطات المعقدة.
وحدات REM تنقذ الموقف (2010-الحاضر)
قدمت CSS3 وحدة REM حوالي 2010، حالّة المشكلة الرئيسية في EM: التراكم. منحتنا REM التدرج النسبي دون تعقيد الوراثة. أضاف Internet Explorer 9 الدعم في 2011، وبحلول 2015، أصبحت وحدات REM شائعة.
اليوم، أفضل الممارسات تجمع بين الوحدات بشكل استراتيجي. REM للطباعة والتباعد. EM للنسب الداخلية للمكونات. البكسل للتفاصيل الدقيقة. تمزج الدوال الحديثة في CSS مثل clamp() هذه الوحدات بشكل ديناميكي، مما يخلق تخطيطات تتكيف مع أي سياق.
هذا التطور—من البكسل الجامدة إلى الوحدات النسبية المرنة—يعكس توقعات المستخدمين التي تحولت من "يجب أن تبدو المواقع متطابقة في كل مكان" إلى "يجب أن تعمل المواقع بشكل جيد في كل مكان".
أمثلة التعليمات البرمجية لتحويل الوحدات
دوال تحويل الوحدات بلغة JavaScript
1// التحويل بين وحدات PX، REM، و EM
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// مثال على الاستخدام
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31الخصائص المخصصة لـ CSS لتحويل الوحدات
1:root {
2 /* أحجام الخط الأساسية */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* القيم البكسلية الشائعة محولة إلى REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* مقياس الطباعة */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* مثال على الاستخدام */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
34مزج SCSS لتحويل الوحدات
1// دوال SCSS لتحويل الوحدات
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// مثال على الاستخدام
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // باستخدام حجم الخط الأصلي (18px) للتحويل إلى em
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
26محول الوحدات بلغة Python
1def px_to_rem(px, root_font_size=16):
2 """تحويل البكسل إلى وحدات REM"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """تحويل وحدات REM إلى البكسل"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """تحويل البكسل إلى وحدات EM"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """تحويل وحدات EM إلى البكسل"""
15 return em * parent_font_size
16
17# مثال على الاستخدام
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21أخطاء شائعة عند تحويل وحدات CSS
بعد مراجعة مئات قواعد التعليمات البرمجية، لاحظت تكرار هذه الأخطاء بشكل متكرر. تجنبها سيوفر عليك وقت التصحيح.
الخطأ 1: عدم مراعاة أحجام الخط الجذرية المخصصة
المشكلة: تقوم بتحويل 24 بكسل إلى 1.5 rem بافتراض حجم الخط الجذري الافتراضي 16 بكسل، لكن مشروعك يستخدم html { font-size: 62.5%; }، مما يجعل الجذر 10 بكسل. ينتهي العنصر بـ 15 بكسل بدلاً من 24 بكسل.
الحل: تحقق دائمًا من حجم الخط الجذري الفعلي لمشروعك قبل التحويل. اضبط حجم الخط الجذري للمحول ليتطابق مع واقع مشروعك.
الخطأ 2: استخدام وحدات EM للطباعة في المكونات المتداخلة
المشكلة: تبني مكون بطاقة بـ font-size: 1.2em للعناوين. يعمل بشكل رائع. ثم تضع بطاقة داخل بطاقة أخرى، وفجأة يصبح حجم العنوان الداخلي 1.44em (1.2 × 1.2)، وليس 1.2em.
الحل: استخدم وحدات REM للطباعة ما لم تكن ترغب تحديدًا في السلوك المتتابع. احتفظ بوحدات EM للمسافات التي يجب أن تتناسب مع حجم الخط المحلي.
الخطأ 3: تحويل عروض الحدود إلى REM
المشكلة: تقوم بتحويل border: 1px إلى border: 0.0625rem للتناسق. عندما يقوم المستخدمون بالتكبير أو تغيير أحجام الخط، تصبح حدودك سميكة وقبيحة.
الحل: احتفظ بالحدود بالبكسل. الحدود تحت البكسل (0.5 بكسل) لديها دعم متصفح غير متسق، ونادرًا ما تحتاج الحدود إلى التناسب مع النص.
الخطأ 4: نسيان أن وحدات استعلامات الوسائط تشير إلى تفضيلات المستخدم
المشكلة: تكتب @media (min-width: 768px) لنقطة انقطاع الجهاز اللوحي. المستخدمون الذين يضبطون حجم خط افتراضي أكبر لا يحصلون على تخطيط الجهاز اللوحي عندما يجب أن يحصلوا عليه.
الحل: استخدم وحدات EM أو REM في استعلامات الوسائط: @media (min-width: 48em). هذا يحترم تفضيلات خط المستخدم، كما هو موصى به في توثيق التصميم المستجيب لـ MDN.
الخطأ 5: مزج طرق الحساب
المشكلة: يستخدم Sass طريقة حساب واحدة، وJavaScript يستخدم طريقة أخرى، والحساب الذهني يستخدم ثالثة. النتائج غير متطابقة، مما يسبب إحباط الضبط البكسلي.
الحل: استخدم هذا المحول كمصدر للحقيقة. ضع إشارة مرجعية له، وارجع إليه أثناء مراجعات الكود، وتأكد من أن كل فرد في فريقك يستخدم نفس منهجية التحويل.
الأسئلة الشائعة
ما الفرق بين وحدات REM و EM؟
يختلف نقطة المرجع تمامًا. وحدات REM دائمًا تنظر إلى حجم الخط للعنصر الجذر <html> - بغض النظر عن مدى تداخل العنصر، 1rem يساوي نفس القيمة المحسوبة. وحدات EM تنظر إلى حجم الخط للعنصر الأصلي المباشر، مما يخلق تأثير متتابع.
فكر في الأمر بهذه الطريقة: إذا قمت بتداخل ثلاثة عناصر <div> بكل منها font-size: 1.2em، فإن نص div الداخلي سيكون أكبر بكثير مما توقعت لأن كل مستوى يضاعف الضرب. مع font-size: 1.2rem في كل مستوى، جميع div الثلاثة لديها أحجام خط متطابقة لأنها جميعًا تشير إلى الجذر.
هذا هو السبب في أن REM أصبحت شائعة للطباعة بمجرد تحسن دعم المتصفح - فهي تلغي العبء الذهني لتتبع سلاسل الوراثة.
أي وحدة CSS هي الأفضل للتصميم المستجيب للويب؟
لا توجد وحدة واحدة تفوز في كل الحالات. أفضل التصميمات المستجيبة تجمع بين الوحدات بشكل استراتيجي:
استخدم REM لـ: المسافات العامة، مقاييس الطباعة، فجوات المكونات، وأي قياس يجب أن يتناسب مع تفضيلات خط المستخدم
استخدم EM لـ: المسافات الداخلية للمكونات (حشو الزر، فجوات البطاقة)، استعلامات الوسائط (تحترم تفضيلات المستخدم)، والعناصر التي يجب أن تتناسب مع سياقها المحلي
استخدم البكسل لـ: حدود 1px (تبدو واضحة)، الظلال (الظلال الدقيقة تحتاج إلى دقة)، وعروض السكتة الدماغية للـ SVG
استخدم النسب المئوية أو وحدات المنفذ لـ: عروض الحاويات، المقاطع ذات الارتفاع الكامل
لقد رأيت قواعد التعليمات البرمجية تحاول استخدام وحدة واحدة في كل مكان - وهذا دائمًا ما يخلق صعوبات في الصيانة. استخدم كل وحدة حيث توفر أكبر فائدة.
[يستمر الترجمة...]
المراجع والقراءة المتعمقة
-
"وحدات وقيم CSS المستوى 3." توصية W3C. https://www.w3.org/TR/css-values-3/
-
ماركوت، إيثان. "تصميم الويب المستجيب." A List Apart، 25 مايو 2010. https://alistapart.com/article/responsive-web-design/
-
راتر، ريتشارد. "عناصر الأسلوب الطباعي المطبقة على الويب." http://webtypography.net/
-
"وحدات CSS." وثائق MDN للويب. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
-
"بكسلات CSS مقابل البكسلات الفعلية." توثيق Stack Overflow. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
-
كوييه، كريس. "أطوال CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
-
"استخدام الخصائص المخصصة لـ CSS (المتغيرات)." وثائق MDN للويب. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
-
"فهم واستخدام وحدات rem في CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
ابدأ بتحويل وحدات CSS بدقة
التحويل اليدوي لوحدات CSS مرهق وعرضة للخطأ. أنت تقوم بالحساب الذهني، وتشكك في الحسابات، وتأمل أنك حصلت على أحجام الخطوط بشكل صحيح. يقضي هذا محول PX إلى REM إلى EM على هذا الاحتكاك.
أدخل قيم البكسل من ملفات التصميم، اضبط أحجام الخطوط لتتوافق مع تكوين مشروعك، واحصل على قيم REM و EM الدقيقة على الفور. انسخها مباشرة إلى الكود الخاص بك. سواء كنت تنفذ نظام تصميم جديد، أو تعيد تركيب قاعدة التعليمات البرمجية الموجودة بوحدات نسبية، أو تحاول فهم كيفية ارتباط هذه الوحدات، يتولى المحول الحساب حتى تركز على البناء.
بالنسبة للمطورين الذين يعملون على مواقع متوافقة مع إمكانية الوصول، يساعد هذا الأداة على ضمان تحجيم التخطيطات بشكل صحيح عندما يعدل المستخدمون تفضيلات الخط - وهو متطلب بموجب المستوى AA من WCAG 2.1. بالنسبة لمن يبنون مكتبات المكونات، يوضح قيم EM التي تخلق النسب التي تريدها. بالنسبة لأي شخص ينقل تصاميم Figma إلى CSS الإنتاج، يسرع من سير عمل التحويل بشكل كبير.
تعتمد الصيغ على مواصفات وحدة القيم والوحدات CSS من W3C، مما يضمن تطابق التحويلات مع كيفية حساب المتصفحات لهذه القيم بالفعل.