CSS - px, em, rem, %
CSS - التحويل من px إلى em
🔸 في CSS، تُستخدم الوحدة px كوحدة مطلقة، بينما em هي وحدة نسبية تُحسب بناءً على حجم الخط (font-size) للعنصر الأب.
لذلك من المفيد معرفة كيفية التحويل بينهما عند تصميم تخطيطات متجاوبة.
🔹 القاعدة الأساسية للتحويل
📌 إذا كان حجم الخط الافتراضي في المتصفح هو 16px (وهو الشائع)، فإن:
1em = 16px
ولذلك:
- 2em = 32px
- 1.5em = 24px
- 0.875em = 14px
🔹 التحويل من px إلى em يدويًا
📌 استخدم هذه المعادلة:
em = px ÷ base font-size
مثال: إذا كان العنصر font-size: 16px، وأردت تحويل 24px إلى em:
24 ÷ 16 = 1.5em
🔹 مثال عملي على em
<style>
html {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32px */
}
p {
font-size: 0.875em; /* 14px */
}
</style>
<h1>عنوان</h1>
<p>فقرة بحجم أصغر</p>
📌 ملاحظات مهمة
emيعتمد على السياق — إذا وُضع داخل عنصر لهfont-sizeخاص، فسيُحسب بناءً عليه.remيستخدم دائمًاhtmlكمرجع، وله سلوك ثابت.- التحويل إلى
emمفيد لجعل التصميم أكثر مرونة واستجابة للتكبير أو إعدادات المتصفح.
تعليقات
إرسال تعليق