فکر میکنم همه شما با واحد اصلی اینترنت به نام px آشنایی دارید و میدانید که پیش فرض وب همان ۱۶ پیکسل میباشد.
واحد em بسیار جالب و کاربردی است و کاربرد آن بصورت تعریف فونت سایز مرجع شماست.
چنانچه از قبل به body یا هر المان دیگری مثل h1 فونت سایز بر حسب px نداده باشید و به یک المان در صفحه مانند p فونت سایز ۱em بدهید، در اصل یعنی همان ۱۶ پیکسل.
اما از اینجا قضیه جالبتر میشود که شما کد زیر را مینویسید.
h4{
font-size:10px;
margin-left:4em;
}
در مثال بالا به دلیل اینکه برای تمام المان های h4 فونت سایز پیش فرض ۱۰پیکسل تعریف شده است، margin-left همان عنصر میشود ۴۰پیکسل، یعنی ۱۰*۴
پس میتوانید با تعریف یک مقدار پیش فرض، تمام مقادیر متغیر بعدی را داینامیک کنید.
۱۶px = 1em = 100%
REM چیست؟
در یک خط و کوتاه میگویم که همواره باز میگردد به روت و همواره برابر مقدار پیش فرض HTML که همان۱۶ است میباشد.
پس ۲rem برابر با ۲*۱۶ میشود.
موفق باشید.