در مورد دو واحد em , rem که بسیار پرکاربرد هستند صحبت خواهم کرد.این دو واحد اندازه گیری جزو واحدهای نسبی می باشند و باعث بهبود پیاده سازی در طراحی وب می شوند.
یک 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 را تغییر دهیم, چون با این کار یک حالت پیشفرض را برای مرورگر کاربر تغییر می دهیم.
