راهنمای کامل EM و REM

یکی از روش هایی که واقعا باعث بهبود پیاده سازی در طراحی وب می شود استفاده از واحدهای نسبی مثل em و rem می باشد.

برای ساختن کامپوننت های مستقل که دوباره قابل استفاده و یا اینکه به راحتی قابل ویرایش باشند, و اینکه بتوانیم با تغییرات کمی به طرح جدیدی از کامپوننت دست پیدا کنیم, به عنوان فقط یکی از نیازها باید از واحدهای نسبی (relative units) مناسب استفاده کنیم.

سوال اینجا است که از کدام یک باید استفاده کرد؟ این سوال چندین سال است که مورد بحث قرار می گیرد و طرفداران هریک از این واحدها به دنبال این هستند که یکی را بر دیگری غالب بدانند.

در این مطلب و مطالب بعدی با هر دو واحد em و rem کاملا آشنا می شویم و همینطور نقاط مثبت و منفی هر کدام را بررسی کرده, و یاد می گیریم چگونه از این واحدها برای ساخت کامپوننت های ماژولار استفاده کنیم.

(اولین بار کلمه ماژول و ماژولار را در یک سفر در قطار از یک استاد دانشگاه در رشته مکانیک شنیدم. مطلب ویکی پدیا در مورد طراحی ماژولار نیاز به ترجمه نیز دارد. در کل ایده طراحی ماژولار بیانگر ساختن یک سیستم از زیر سیستم های مستقل است که فواید بسیاری را در بر دارد.)

 

EM چیست؟

یک em یک واحد تایپوگرافی است که برابر با font-size کنونی تعیین شده می باشد.

یعنی چه؟ یعنی اگر عنصری دارای اندازه فونت 20px باشد پس 1em=20px است.

 

h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */

 

به عنوان نمونه برای عنصر h1 چون اندازه فونت 20 پیسکل تعیین شده است پس اگر برای این عنصر از واحد em برای تعیین برخی از ویژگی های آن استفاده کنیم هر em برابر با 20 پیکسل می باشد, مثلا:

 

h1 { 
  font-size: 20px; /* 1em = 20px */
  padding-right: 2em; /* 2em = 2*20 = 40px */
}

 

همانطور که دیدیم برای دانستن اندازه هر em در انتخابگر, به ویژگی font-size رجوع کردیم. حال اگر این ویژگی برای انتخابگر تعیین نشده بود چه؟

کافی است به ویژگی font-size پدر آن عنصر رجوع کنیم و اگر آن عنصر هم این ویژگی برایش تعیین نشده بود همینطور به بالا حرکت می کنیم تا در اجدادش عنصری پیدا کنیم که ویژگی font-size دارد و اگر در نهایت عنصری پیدا نشد, به عنصر ریشه که همان html است می رسیم و بصورت پیشفرض font-size برای html برابر با 16px می باشد مگر اینکه کاربر از طریق تنظیمات مرورگر این عدد را تغییر دهد. و یا ما در CSS اندازه فونت html را تغییر دهیم.

معمولا کار جالبی نیست که اندازه فونت html را تغییر دهیم, چون با این کار یک حالت پیشفرض را برای مرورگر کاربر تغییر می دهیم. حالتی که شاید کاربر به آن خو گرفته باشد. بهتر است بدانیم اگر font-size را برای html تعیین نکنیم مقدار آن 100% می باشد که همان 16 پیکسل مربوط به تنظیمات مرورگر است.

از em برای تعیین اندازه ویژگی font-size هم می توان استفاده کرد.

 

h1 { 
  font-size: 2em; /* یعنی چی؟ */
}

 

اکنون اندازه حقیقی فونت برای انتخابگر h1 چند است؟ با توجه به بحثی که شد دوباره به اندازه فونت عناصر پدر رجوع می کنیم. این بار فرض کنید h1 فرزند header می باشد, داریم:

 

<header>
  <h1>HAVE FUN!</h1>
</header>

 

 

header {
  font-size: 18px;
}

header h1 { 
  font-size: 2em; /* 2*18 = 36px */
}

 

اکنون فرض کنید داخل عنصر h1 عنصری دیگر داریم که باید یک مقدار padding داشته باشد, محاسبه مقدار آن بصورت زیر است:

 

header {
  font-size: 18px;
}

header h1 { 
  font-size: 2em; /* 2*18 = 36px */
}

h1 span {
  padding-right: 0.5em; /* 0.5*36 = 18px */
}

 

همانطور که قبلا گفته شد چون عنصر span در حال حاضر font-size ندارد ما به font-size پدرش رجوع می کنیم.

(توجه داشته باشین که استفاده از نام تگ ها به عنوان انتخابگر روش مناسبی نمی باشد و در اینجا به منظور ساده تر بیان کردن موضوع به این صورت عمل می کنیم. دلیل این مورد هم واضح است چراکه ما اطمینان نداریم که در آینده تگ ها به همین صورت در پروژه بمانند شاید از تگ دیگری استفاده شد و غیره…, نباید استایل ما به این صورت شکننده باشد. ولی ما مطمئن هستیم که نام کلاس ها توسط هیچ تیم دیگری تغییر نخواهد کرد و اگر هم تغییر کند می دانند که باید در استایل هم آن نام را بروز کنند.)

اکثر افرادی که تازه با em آشنا می شوند, کمی برایشان اینکه 1em در مکان های مختلف عددی متفاوت است و باید دنبال حساب کردن آن باشند, گیج کننده و کمی خسته کننده است اما این فقط یک حس اولیه است. چرا که در خیلی مواقع شما نیاز به دانستن اینکه اندازه یک عنصر چند پیکسل است ندارید و مستقیم با خود em به ظاهری که می خواهید می رسید و نکته دیگر اینکه به دلیل فواید زیاد em در زمان پیاده سازی و نگه داری, همیشه با اشتیاق از آن استفاده خواهید کرد.

بعد از em به rem می رسیم…

 

REM چیست؟

rem یا Root EM متولد شده است تا آن محساباتی که در em وجود دارند را نداشته باشد. این واحد تایپوگرافی برابر با font-size ریشه است یعنی همیشه برابر با اندازه فونتی که برای html تعیین می شود می باشد.

پیچیده ترین مورد بالا را این بار با rem می نویسیم:

 

header {
  font-size: 18px;
}

header h1 { 
  font-size: 2rem; /* 2*16 = 32px */
}

h1 span {
  padding-right: 0.5rem; /* 0.5*16 = 8px */
}

 

همانطور که مشاهده می کنید 1rem همیشه 16px است, مهم نیست که کجا استفاده می شود و مهم نیست که در اینجا پدر این عناصر اندازه فونت 18px دارد, بلکه همیشه مقدار font-size عنصر html تعیین کننده خواهد بود, که بصورت پیشفرض این مقدار 16 پیکسل است مگر اینکه تغییرش بدهیم.

قابل اطمینان است, فهم آن ساده است.

 

 

زمانی که بدانیم em چیست فهمیدن rem بسیار ساده است. قبول دارید؟

 

دمو و آزمایش

در آدرس زیر ابزار ساده ای برای بررسی و مقایسه این دو واحد ساخته شده است با تغییر مقادیر ویژگی های نوشته شده می توانیم بهتر موضوع را درک کنیم:

همچنین این ابزار در این مطلب معرفی شده است.

 

پشتیبانی مرورگر ها

در حالی که استفاده از em در همه مرورگرها بدون هیچ نگرانی خواهد بود, استفاده از rem برای برخی پروژه ها نیاز به تامل دارد:

در مطلب بعدی تازه به بحث اصلی که مقایسه و موارد استفاده این دو هست می رسیم, با ما همراه باشید.