Web Design Calculator

Essential calculators for web designers and developers

REM
1rem
EM
1em
Percentage
100%
Pixel:
REM:
الفرق بين REM و EM
🔹 REM: يعتمد دائماً على حجم الخط الأساسي (عادة 16px)
🔸 EM: يعتمد على حجم خط العنصر الأب - يتغير حسب السياق!
مثال توضيحي حي:
عنصر بحجم خط 16px (root):
1rem = 16px ثابت ✓
عنصر داخل أب بحجم خط: px
0.5em = 10px
1em = 20px
1.5em = 30px
2em = 40px
⚡ جرّب تغيير الرقم - كل القيم ستتغير!
💡 متى تستخدم أيهما؟
• REM: للأحجام العامة (margins, padding, font-sizes)
• EM: للأحجام النسبية داخل المكونات (buttons, icons)
16px
Height (px)
1080px
Column Width
90px