حتما شما متوجه شده اید که برای font-size واحدهای مختلفی استفاده میشود. در این مقاله من سه واحد px، em، و rem را بصورت مختصر بررسی میکنم.
پیکسل می تواند اولین گزینه باشد اما یک مشکل دارد. فرض کنید از واحد px در پروژه خود استفاده کرده اید و براساس پیکسل مدیا کوری نوشته اید. اگر کاربر اندازه فونت پیشفرض مرورگر خود را تغییر داده باشد چه؟ فونت سایز ثابت می ماند و تنظیمات کاربر برای فونت اعمال نخواهد شد.
واحد em بر اساس font-size المان پدر محاسبه می شود. برای مثال، اگر المان div اندازه فونت 16px داشته باشد، برای آن div و فرزندانش 1em = 16px میشود.
برای مثال اگر اندازه فونت المان پدر 20px باشد، و بخواهیم اندازه فونت المان فرزند 30px باشد، em به این صورت محاسبه میشود:
30 / 20 = 1.5
اندازه فونت المان فرزند برابر با 1.5em است.
مقدار rem بر خلاف em اندازه خود را از المان پدر به ارث نمیبرد، بلکه مقدار خود را براساس المان root یا همان html محاسبه میکند. برای مثال، اگر المان root اندازه فونت 16px داشته باشد، برای برای تمامی المان ها 1em = 16px میشود.
مطالعه بیشتر:
