قم بتحويل وحدات CSS بين البيكسل (PX) و الجذر em (REM) و em (EM) باستخدام هذه الحاسبة البسيطة. ضروري لتصميم وتطوير الويب المتجاوب.
قم بالتحويل بين وحدات البكسل (PX) و الجذر em (REM) و em (EM). أدخل قيمة في أي حقل لرؤية القيم المعادلة في الوحدات الأخرى.
فهم وتحويل وحدات CSS أمر ضروري لتصميم وتطوير الويب المتجاوب. تعتبر وحدات PX (بكسل) و REM (جذر EM) و EM من اللبنات الأساسية التي تحدد كيفية قياس حجم العناصر وتحديد مواقعها عبر الأجهزة المختلفة وأحجام الشاشات. تتيح لك أداة تحويل الوحدات الشاملة هذه ترجمة القيم بسهولة بين هذه الوحدات الثلاثة الأساسية في CSS، مما يساعدك على إنشاء تخطيطات ويب أكثر مرونة وصيانة.
تعتبر وحدات البكسل (PX) وحدات ثابتة الحجم توفر تحكمًا دقيقًا ولكنها تفتقر إلى القابلية للتوسع، بينما تتوسع وحدات REM بالنسبة لحجم خط العنصر الجذري، وتتناسب وحدات EM مع حجم خط العنصر الأب. يمكن أن يكون تحويل هذه الوحدات تحديًا، خاصة عند العمل مع تصميمات معقدة أو عند دعم ميزات الوصول مثل تغيير حجم النص. تبسط أداة تحويل PX و REM و EM هذه العملية، مما يتيح لك التركيز على إنشاء تصميمات جميلة ومتجاوبة.
تعتبر وحدات البكسل (PX) الوحدة الأساسية والأكثر استخدامًا في CSS. البكسل هو نقطة واحدة في شبكة الصورة الرقمية ويمثل أصغر عنصر يمكن التحكم فيه على الشاشة. في CSS، توفر وحدات البكسل وحدة قياس ثابتة الحجم تبقى متسقة بغض النظر عن عوامل التنسيق الأخرى.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6
الخصائص الرئيسية لوحدات البكسل:
وحدات REM (جذر EM) هي وحدات نسبية تتوسع بناءً على حجم خط العنصر الجذري (عادةً عنصر <html>
). بشكل افتراضي، تحدد معظم المتصفحات حجم الخط الجذري إلى 16 بكسل، مما يجعل 1rem يساوي 16 بكسل ما لم يتم تغييره صراحة.
1html {
2 font-size: 16px; /* الافتراضي في معظم المتصفحات */
3}
4
5.element {
6 width: 12.5rem; /* ما يعادل 200px مع حجم الخط الجذري الافتراضي */
7 font-size: 1rem; /* ما يعادل 16px */
8 margin: 0.625rem; /* ما يعادل 10px */
9}
10
الخصائص الرئيسية لوحدات REM:
وحدات EM هي وحدات نسبية تتوسع بناءً على حجم خط العنصر الأب. إذا لم يتم تحديد حجم الخط للأب، ستشير وحدات EM إلى حجم الخط الموروث.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* ما يعادل 16px (20px × 0.8) */
7 margin: 0.5em; /* ما يعادل 8px (16px × 0.5) */
8}
9
الخصائص الرئيسية لوحدات EM:
فهم العلاقات الرياضية بين وحدات PX و REM و EM أمر حاسم للتحويلات الدقيقة. إليك الصيغ المستخدمة في محولنا:
لتحويل وحدات البكسل إلى وحدات REM، قسّم قيمة البكسل على حجم الخط الجذري:
على سبيل المثال، مع حجم الخط الجذري الافتراضي 16 بكسل:
لتحويل وحدات البكسل إلى وحدات EM، قسّم قيمة البكسل على حجم خط العنصر الأب:
على سبيل المثال، مع حجم خط الأب 16 بكسل:
لتحويل وحدات REM إلى وحدات بكسل، اضرب قيمة REM في حجم الخط الجذري:
على سبيل المثال، مع حجم الخط الجذري الافتراضي 16 بكسل:
لتحويل وحدات EM إلى وحدات بكسل، اضرب قيمة EM في حجم خط العنصر الأب:
على سبيل المثال، مع حجم خط الأب 16 بكسل:
لتحويل وحدات REM إلى وحدات EM، تحتاج إلى أخذ حجم الخط الجذري وحجم خط العنصر الأب في الاعتبار:
إذا كان حجم الخط الجذري وحجم خط الأب متساويين (مثل 16 بكسل)، فإن 1rem = 1em.
لتحويل وحدات EM إلى وحدات REM، استخدم الصيغة التالية:
مرة أخرى، إذا كانت كلا حجمي الخطوط متساويين، فإن 1em = 1rem.
تجعل أداة تحويل الوحدات لدينا من السهل ترجمة القيم بين وحدات PX و REM و EM. إليك دليل خطوة بخطوة لاستخدام المحول بفعالية:
<html>
فهم متى يجب استخدام كل وحدة CSS وكيفية التحويل بينها أمر حاسم لتطوير الويب الفعال. إليك بعض التطبيقات العملية والسيناريوهات التي تثبت فيها أداة التحويل لدينا قيمتها:
يعد تحويل الوحدات أمرًا ضروريًا لإنشاء تصميمات متجاوبة حقًا:
1/* تحويل قيم البكسل الثابتة إلى وحدات REM المتجاوبة */
2.container {
3 /* من: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* من: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9
تحسن استخدام الوحدات النسبية إمكانية الوصول من خلال احترام تفضيلات المستخدمين:
تستفيد أنظمة التصميم الحديثة من استخدام وحدات مدروسة:
يتطلب إنشاء طباعة متناغمة اختيار وحدات بعناية:
1/* نظام الطباعة باستخدام وحدات REM */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8
عند تنفيذ تصميمات من أدوات مثل Figma أو Photoshop:
بينما تعتبر PX و REM و EM هي الوحدات الأكثر شيوعًا، هناك بدائل تستحق النظر:
تعكس تاريخ وحدات CSS التطور الأوسع لتصميم الويب، من التخطيطات الثابتة إلى النهج المتجاوب اليوم.
في الأيام الأولى من CSS، كانت وحدات البكسل هي السائدة. أنشأ مصممو الويب تخطيطات ثابتة العرض، عادةً بعرض 640 بكسل أو 800 بكسل لتناسب دقة الشاشة الشائعة. لم تكن إمكانية الوصول وتنوع الأجهزة مصدر قلق كبير، وكان التحكم الدقيق هو الهدف الرئيسي.
مع تنوع أحجام الشاشات، اكتسبت التخطيطات المعتمدة على النسب شعبية. بدأ المصممون في إنشاء تصميمات أكثر مرونة، على الرغم من أن الطباعة غالبًا ما ظلت بوحدات البكسل. شهدت هذه الفترة إدخال وحدات EM في CSS، على الرغم من أن اعتمادها كان محدودًا بسبب تعقيد إدارة أحجام الخطوط المتسلسلة.
غيرت مقدمة iPhone في عام 2007 تصميم الويب. فجأة، كانت المواقع بحاجة للعمل على شاشات صغيرة تصل إلى 320 بكسل عرضًا. أدى ذلك إلى زيادة الاهتمام بتقنيات التصميم المتجاوب والوحدات النسبية. أصبحت قيود وحدات EM (خاصة التأثير المتسلسل) أكثر وضوحًا مع تعقيد التصميمات.
غيرت المقالة المؤثرة لإيثان ماركوت حول التصميم المتجاوب في عام 2010 كيفية اقتراب المطورين من وحدات CSS. تم تقديم وحدة REM في CSS3، مما يوفر فوائد التوسع النسبي دون التعقيدات المتسلسلة لوحدات EM. نمت دعم المتصفحات لوحدات REM بشكل مطرد خلال هذه الفترة.
تحتضن تطوير الويب اليوم مزيجًا من الوحدات لأغراض مختلفة:
يعكس هذا التطور انتقال الويب من وسيط قائم على الوثائق إلى منصة تطبيقات معقدة يجب أن تعمل عبر عدد لا يحصى من الأجهزة والسياقات.
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
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
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
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
وحدات REM (جذر EM) هي وحدات نسبية تتعلق بحجم خط العنصر الجذري (عادةً عنصر <html>
)، بينما وحدات EM هي وحدات نسبية تتعلق بحجم خط العنصر الأب. تعني هذه الاختلافات الرئيسية أن وحدات REM تحافظ على حجم متسق في جميع أنحاء المستند بغض النظر عن التداخل، بينما يمكن أن تخلق وحدات EM تأثيرًا متسلسلًا عند تداخل العناصر.
لا توجد وحدة "أفضل" واحدة لجميع الحالات. عادةً ما يكون استخدام مزيج من الوحدات هو الأكثر فعالية:
النهج المثالي هو استخدام كل وحدة لما هو أفضل ضمن نظام متماسك.
تم تأسيس 16 بكسل كافتراضي كمعيار للقراءة يعمل بشكل جيد عبر الأجهزة. أظهرت الأبحاث أن النص الذي يبلغ حوالي 16 بكسل هو الأمثل للقراءة على الشاشات على مسافات عرض نموذجية. يوفر هذا الافتراضي أيضًا قاعدة جيدة لإمكانية الوصول، مما يضمن عدم كون النص صغيرًا جدًا لمعظم المستخدمين.
نعم، يدعم CSS القيم السلبية للعديد من الخصائص باستخدام أي نوع من الوحدات. تعتبر الهوامش السلبية والترجمات والمواقع حالات استخدام شائعة للقيم السلبية. يتعامل محولنا مع القيم السلبية بشكل صحيح لجميع أنواع الوحدات.
تتضاعف وحدات EM عند تداخل العناصر. على سبيل المثال:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10
يمكن أن يكون لهذا التأثير المتسلسل استخدامات مفيدة لإنشاء تصميمات متناسبة، ولكنه يتطلب إدارة دقيقة لتجنب التوسع غير المقصود.
تتم معالجة الشاشات عالية DPI تلقائيًا عند استخدام وحدات نسبية مثل REM و EM. نظرًا لأن هذه الوحدات تعتمد على حجم الخط بدلاً من البكسل الفعلي، فإنها تتوسع بشكل مناسب على الشاشات عالية الدقة. بالنسبة للصور والحدود، ضع في اعتبارك استخدام استعلامات الوسائط مع نسبة بكسل الجهاز أو الدقة.
تحسن دعم المتصفحات لوحدات REM و EM في استعلامات الوسائط بشكل كبير. يُوصى عمومًا باستخدام وحدات EM في استعلامات الوسائط لأنها:
1/* استخدام وحدات EM لاستعلامات الوسائط */
2@media (min-width: 48em) { /* 768px مع قاعدة 16px */
3 /* أنماط الأجهزة اللوحية */
4}
5
6@media (min-width: 64em) { /* 1024px مع قاعدة 16px */
7 /* أنماط سطح المكتب */
8}
9
تعمل معظم أدوات التصميم بشكل أساسي باستخدام البكسلات. عند تنفيذ التصميمات:
بعض أدوات التصميم تحتوي على إضافات يمكن أن تساعد في هذه العملية تلقائيًا.
تعامل المتصفحات الوحدات الفرعية بشكل مختلف. تقوم بعض المتصفحات بالتقريب إلى أقرب بكسل، بينما تدعم أخرى عرض الوحدات الفرعية للحصول على مقياس أكثر سلاسة. يمكن أن يسبب هذا أحيانًا اختلافات طفيفة عبر المتصفحات، خاصة مع قيم REM/EM الصغيرة أو عند استخدام التحولات. بالنسبة لمعظم حالات الاستخدام، تكون هذه الاختلافات ضئيلة.
لا يوجد فرق كبير في الأداء بين استخدام البكسلات أو REM أو EM في المتصفحات الحديثة. يجب أن تستند خيارات الوحدات إلى متطلبات التصميم والسلوك المتجاوب واحتياجات إمكانية الوصول بدلاً من اعتبارات الأداء.
"وحدات وقيم 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 اليدوية ودع محول وحدات PX و REM و EM يقوم بالعمل من أجلك. سواء كنت تبني موقع ويب متجاوب أو تنشئ نظام تصميم أو تتعلم فقط عن وحدات CSS، ستوفر لك هذه الأداة الوقت وتضمن الدقة. أدخل قيمك الآن لترى مدى سهولة تحويل الوحدات!
اكتشف المزيد من الأدوات التي قد تكون مفيدة لسير عملك