مقدمه
در CSS برای تعیین اندازه‌ها گزینه‌های مختلفی در اختیار داریم. در طراحی‌های مدرن و واکنش‌گرا (Responsive)، استفاده از واحدهای نسبی مانند em و rem بسیار رایج است؛ زیرا این واحدها به‌صورت خودکار با اندازه فونت‌های تعریف‌شده در صفحه هماهنگ می‌شوند و انعطاف‌پذیری بیشتری نسبت به واحدهای ثابت مانند px دارند.
اگر مدتی با CSS کار کرده باشید، احتمالاً بارها از em و rem استفاده کرده‌اید. اما شاید هنوز این سؤال برایتان وجود داشته باشد که تفاوت دقیق این دو چیست و در چه شرایطی باید از هرکدام استفاده کرد.
در این مقاله به‌صورت ساده و کاربردی تفاوت em و rem را بررسی می‌کنیم.
خلاصه تفاوت em و rem
قبل از ورود به جزئیات، تفاوت اصلی این دو واحد را می‌توان این‌گونه خلاصه کرد:
- زمانی که
emبرایfont-sizeاستفاده شود، نسبت به اندازه فونت عنصر والد (Parent) محاسبه می‌شود. - زمانی که
emدر سایر ویژگی‌ها مانندpadding،marginیاwidthاستفاده شود، نسبت به اندازه فونت همان عنصر محاسبه می‌شود. - واحد
remهمیشه نسبت به اندازه فونت عنصر ریشه (html) محاسبه می‌شود.
آشنایی با واحد em
واحد em از دنیای تایپوگرافی وارد CSS شده است و به شما اجازه می‌دهد اندازه یک عنصر را نسبت به اندازه فونت والد آن تعیین کنید.
مثال:
.parent {
font-size: 18px;
}
.child {
font-size: 1.5em;
}
در این مثال:
1.5 × 18px = 27px
بنابراین اندازه فونت عنصر فرزند برابر با 27 پیکسل خواهد بود.
اگر والد font-size نداشته باشد چه می‌شود؟
اگر عنصر والد مقدار font-size نداشته باشد، مرورگر به سراغ والدهای بالاتر می‌رود.
این روند تا رسیدن به عنصر html ادامه پیدا می‌کند.
اگر در نهایت هیچ مقداری پیدا نشود، اندازه پیش‌فرض مرورگر که معمولاً 16px است استفاده خواهد شد.
استفاده از em در سایر ویژگی‌ها
واحد em فقط برای font-size نیست.
می‌توانید از آن در ویژگی‌هایی مانند:
- padding
- margin
- width
- height
- max-width
و بسیاری از خصوصیات دیگر استفاده کنید.
مثال:
.parent {
font-size: 18px;
}
.child {
font-size: 1.5em;
padding: 2em 1em;
}
در اینجا:
اندازه فونت فرزند:
27px
بنابراین:
padding-top = 54px
padding-bottom = 54px
زیرا:
2 × 27px = 54px
و همچنین:
padding-left = 27px
padding-right = 27px
زیرا:
1 × 27px = 27px
قانون مهم em
به خاطر سپردن این قانون بسیار مهم است:
✅ اگر em برای font-size استفاده شود:
نسبت به اندازه فونت والد محاسبه می‌شود.
✅ اگر em برای سایر ویژگی‌ها استفاده شود:
نسبت به اندازه فونت خود عنصر محاسبه می‌شود.
مشکل بزرگ em: اثر تجمعی (Compounding)
تا اینجا همه چیز عالی به نظر می‌رسد.
اما em یک مشکل شناخته‌شده دارد که به آن Compounding Effect یا اثر تجمعی گفته می‌شود.
مثال:
.parent {
font-size: 15px;
}
.child {
font-size: 2em;
}
ساختار HTML:
<div class="parent">
I'm 15px
<div class="child">
I'm 30px
<div class="child">
I'm 60px
<div class="child">
I'm 120px
</div>
</div>
</div>
</div>
نتیجه:
15px
30px
60px
120px
همان‌طور که مشاهده می‌کنید، هر عنصر فرزند از اندازه فونت عنصر والد خود استفاده می‌کند و این موضوع باعث می‌شود اندازه‌ها به صورت تصاعدی افزایش پیدا کنند.
این اتفاق در پروژه‌های بزرگ می‌تواند باعث ایجاد مشکلات و نتایج غیرمنتظره شود.
واحد rem چیست؟
برای حل مشکل تجمعی em، واحد rem معرفی شد.
کلمه rem مخفف:
Root EM
است.
این واحد همیشه بر اساس اندازه فونت عنصر ریشه یعنی:
<html>
محاسبه می‌شود.
مثال استفاده از rem
html {
font-size: 16px;
}
.parent {
font-size: 15px;
}
.child-rem {
font-size: 2rem;
}
HTML:
<div class="parent">
I'm 15px
<div class="child-rem">
I'm 32px
<div class="child-rem">
I'm 32px
<div class="child-rem">
I'm 32px
</div>
</div>
</div>
</div>
نتیجه:
15px
32px
32px
32px
چرا؟
زیرا:
2 × 16px = 32px
و rem فقط به مقدار تعریف‌شده در عنصر html توجه می‌کند.
مزیت اصلی rem
مزیت بزرگ rem این است که اندازه‌ها همیشه قابل پیش‌بینی هستند.
برخلاف em:
- اندازه‌ها روی هم جمع نمی‌شوند.
- وابستگی به والدها وجود ندارد.
- در پروژه‌های بزرگ مدیریت راحت‌تری دارند.
rem فقط برای فونت نیست
همانند em، از rem نیز می‌توان در ویژگی‌های مختلف استفاده کرد:
padding: 2rem;
margin: 1rem;
width: 20rem;
تمام این مقادیر نسبت به اندازه فونت عنصر html محاسبه می‌شوند.
مقایسه em و rem
| ویژگی | em | rem |
|---|---|---|
| مرجع محاسبه font-size | والد | عنصر html |
| اثر تجمعی | دارد | ندارد |
| قابل پیش‌بینی بودن | کمتر | بیشتر |
| مناسب برای طراحی‌های پیچیده | متوسط | عالی |
| انعطاف نسبت به والد | زیاد | کم |
em یا rem؟ کدام بهتر است؟
واقعیت این است که هیچ‌کدام بهتر از دیگری نیستند.
انتخاب بین آن‌ها به نیاز پروژه بستگی دارد.
برخی توسعه‌دهندگان تقریباً تمام اندازه‌ها را با rem تعریف می‌کنند تا همه چیز یکپارچه و قابل پیش‌بینی باشد.
برخی دیگر از em در بخش‌هایی استفاده می‌کنند که وابستگی به اندازه فونت والد منطقی است؛ مثلاً برای فاصله‌های داخلی یک کامپوننت.
جمع‌بندی
واحدهای em و rem هر دو از مهم‌ترین واحدهای نسبی در CSS هستند و نقش مهمی در طراحی واکنش‌گرا دارند.
به طور خلاصه:
emنسبت به اندازه فونت والد محاسبه می‌شود و می‌تواند اثر تجمعی ایجاد کند.remهمیشه نسبت به اندازه فونت عنصرhtmlمحاسبه می‌شود.remمعمولاً برای طراحی‌های مدرن و مقیاس‌پذیر انتخاب محبوب‌تری است.emزمانی کاربرد دارد که بخواهید اندازه‌ها به صورت طبیعی از والد تأثیر بگیرند.
در بسیاری از پروژه‌های حرفه‌ای امروزی، ترکیبی از هر دو واحد استفاده می‌شود تا هم انعطاف‌پذیری و هم قابلیت پیش‌بینی حفظ شود.
از همراهی شما با پارمین کلود سپاسگزاریم.
نظرات کاربران