در ادامه مباحث آموزش CSS در این مقاله در مورد دو واحد em , rem که بسیار پرکاربرد هستند صحبت می کنیم.این دو واحد اندازه گیری جزو واحدهای نسبی می باشند و باعث بهبود پیاده سازی در طراحی وب می شوند.
EM چیست؟
یک em em یک واحد تایپوگرافی است که برابر با font-size کنونی تعیین شده می باشد.یعنی اگر font-size عنصری را 20پیکسل تعیین کرده باشیم،مقدار em 1 برای این عنصر برابر با 20پیکسل خواهد بود.
h1 { font-size: 20px } /* 1em = 20px */
p { font-size: 16px } /* 1em = 16px */
حال می توانیم از این واحد em برای تعیین مقدار ویژگی های مختلف استفاده کنیم.به عنوان مثال :
p {
font-size: 16px; /* 1em = 20px */
margin-top: 2em; /* 2em = 2*16 = 32px */
}
همانطور که مشاهده می کنید برای دانستن اندازه هر em به ویژگی font-size عناصر رجوع می کنیم،حال اگر ویژگی font-size برای یک عنصر مقداردهی نشده باشد چه اتفاقی می افتد؟
کافی است به ویژگی font-size پدر آن عنصر رجوع کنیم و اگر آن عنصر هم این ویژگی برایش تعیین نشده بود همینطور به بالا حرکت می کنیم تا در اجدادش عنصری پیدا کنیم که ویژگی font-size را دارد و اگر در نهایت عنصری پیدا نشد, به عنصر ریشه که همان html است می رسیم و بصورت پیشفرض font-size برای html برابر با 16px می باشد مگر اینکه کاربر از طریق تنظیمات مرورگر این عدد را تغییر دهد. و یا ما در css اندازه فونت html را تغییر دهیم.
معمولا کار جالبی نیست که اندازه فونت html را تغییر دهیم, چون با این کار یک حالت پیشفرض را برای مرورگر کاربر تغییر می دهیم.
نکته : اگر font-size را برای html تعیین نکنیم مقدار آن 100% می باشد که همان 16 پیکسل مربوط به تنظیمات مرورگر است.
بنابراین به طور خلاصه می توان گفت مقدار 1em برابر با font-size عنصر می باشد و چنانچه مقدار font-size برای عنصر تعیین نشده باشد،مقدار 1em برابر با font-size والد عنصر خواهد بود.
<style>
Header{
Font-size:16px;
}
Header h1 {
Font-size:2em ; /* 2*16 = 32px */
}
</style>
<header>
<h1>HAVE FUN!</h1>
</header>
REM چیست؟
استفاده از rem کمی ساده تر از em می باشد چرا که این واحد اندازه گیری متولد شده است تا آن محساباتی که در em وجود دارند را نداشته باشید. این واحد تایپوگرافی برابر با font-size عنصر ریشه است یعنی همیشه برابر با اندازه فونتی که برای html تعیین می شود می باشد. به مثال زیر توجه کنید:
<style>
header{font-size:20px;}
header h1{
font-size:2rem;
}
h1 span{
display:inline-block;
padding: .5rem;
}
</style>
<header>
<h1>header for<span> rem </span> relative units</h1>
</header>
همانطور که مشاهده می کنید 1rem همیشه 16px است, مهم نیست که کجا استفاده می شود و مهم نیست که در اینجا پدر این عناصر اندازه فونت 18px دارد, بلکه همیشه مقدار font-size عنصر html تعیین کننده خواهد بود, که بصورت پیشفرض این مقدار 16 پیکسل است مگر اینکه تغییرش بدهیم.
همانطور که مشخص است استفاده از واحد rem ساده تر و قابل فهم تر می باشد اما پشتیبانی از em در مرورگرهای بیشتری انجام می شود و می توانیم بدون هیچ نگرانی در تمام مرورگرها از ان استفاده کنیم در حالی که استفاده از rem برای برخی پروژه ها نیاز به تامل دارد.پشتیبانی مرورگرها از واحد rem را مشاهده می کنید.
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های css با ما همراه باشید.
کامنت جدید ...