Posted on • Updated on
درک واحد EM در CSS
پرسشهای متداول درباره واحد EM در CSS
در پایان به چند پرسش متداول درباره واحد EM در CSS پاسخ میدهیم.
تفاوت واحدهای em و rem چیست؟
تفاوت اصلی واحدهای em و rem در نقطهٔ مرجع اندازهٔ پایه آنهاست. واحد em نسبت به font-size عنصر والد خود است. rem به معنای "root em" است و فقط نسبت به عنصر ریشه (html) است. این ویژگی، واحد rem را در وبسایتهای بزرگ قابلپیشبینیتر و مدیریت آن را آسانتر میکند.
چگونه پیکسل را در CSS به em تبدیل کنم؟
برای تبدیل پیکسل به em باید اندازهٔ کل 1em را بدانید که بهطور پیشفرض 16px است.
سپس فرمول px / em را بهکار ببرید.
برای نمونه، وقتی 1em برابر 16px باشد، 32px به 32 / 16 = 2em تبدیل میشود.
برای تبدیل آسان از مبدل PX to EM ما استفاده کنید.
چگونه واحد em را در CSS به پیکسل تبدیل کنم؟
برای تبدیل em به پیکسل، باید اندازهٔ 1em را بدانید که پیشفرض آن 16px است.
سپس فرمول em * em size را بهکار ببرید.
اگر 1em برابر 16px باشد، 2em به 2 * 16 = 32px تبدیل میشود.
از مبدل EM to PX ما استفاده کنید.
چرا باید بهجای پیکسل از واحدهای EM استفاده کنم؟
واحد em نسبت به پیکسل چند مزیت دارد. این واحد بر اساس تنظیمات مرورگر کاربر تنظیم میشود و وبسایت را برای کاربرانی که font-size را افزایش دادهاند دسترسپذیرتر میکند. واحد em چون بر اساس font-size عنصر والد تنظیم میشود، طراحی انعطافپذیرتر و واکنشگراتری فراهم میکند.
آیا میتوانم واحد em را برای سبکهایی غیر از font-size استفاده کنم؟
بله، واحد em را میتوان برای هر ویژگی سبک CSS که مقدار طول میپذیرد، نه فقط font-size، بهکار برد. برای نمونه: width، height، padding، margin و line-height. استفاده از em برای این ویژگیها به حفظ چیدمان متناسب در اندازههای مختلف صفحه کمک میکند.
آیا همهٔ مرورگرها از واحد em پشتیبانی میکنند؟
بله، واحد em در مرورگرهای مدرن، از جمله Chrome، Firefox، Safari و Edge، بهطور گسترده پشتیبانی میشود. میتوانید دربارهٔ پشتیبانی واحد em در مستندات caniuse بخوانید.
اگر عناصر را با واحد EM تو در تو کنم چه میشود؟
اگر عناصری را که از واحد em استفاده میکنند تو در تو کنید، اندازهٔ عنصر فرزند نسبت به اندازهٔ عنصر والد خواهد بود. این ممکن است باعث شود اندازهٔ فرزند از انتظار بزرگتر یا کوچکتر شود. برای جلوگیری از آن میتوانید از واحد rem استفاده کنید که همیشه نسبت به اندازهٔ عنصر ریشه (html) است.
آیا استفاده از واحد EM معایبی دارد؟
با وجود مزایای فراوان واحد em، مدیریت آن میتواند از واحدهای مطلقی مانند px دشوارتر باشد. چون em نسبی است، اندازهٔ واقعی آن با اندازهٔ عنصر والد تغییر میکند. این امر پیشبینی اندازهٔ عناصر را دشوارتر میکند، بهویژه در چیدمانهای پیچیده.
آیا میتوانم از واحد EM در مدیا کوئریها استفاده کنم؟
بله، میتوانید از واحد em در مدیا کوئریها استفاده کنید. در واقع، استفاده از واحد em در مدیا کوئریها میتواند واکنشگرایی طراحی شما را بهبود دهد. چون واحدهای em نسبی هستند، با تنظیمات مرورگر کاربر سازگار میشوند. یعنی مدیا کوئریهای شما با تنظیمات کاربر تطبیق پیدا میکنند.
چگونه اندازه عناصر تو در تو را با واحد EM محاسبه کنم؟
برای محاسبه اندازه عناصر تو در تو با واحد em، اندازه عنصر والد را در اندازه عنصر فرزند ضرب کنید. برای مثال، اگر اندازه عنصر والد 1.5em و اندازه عنصر فرزند 2em باشد، اندازه واقعی عنصر فرزند 1.5 * 2 = 3em خواهد بود. دلیلش این است که اندازه عنصر فرزند نسبت به اندازه عنصر والد تعیین میشود.