تفاوت بین REM، EM و PX چیست؟

در این مقاله در مورد REM، EM و Px صحبت خواهیم کرد. چیست و چرا از واحدهای rem استفاده می کنیم؟

REM در CSS چیست؟

Rem (ریشه em) مخفف اندازه فونت عنصر ریشه .

اندازه قلم/اندازه متن عنصر ریشه می تواند برای تعریف REM استفاده شود. این به این معنی است که 1rem به معنای کل اندازه فونت عنصر html است که به طور پیش فرض در اکثر مرورگرها روی 16 پیکسل تنظیم شده است. در نتیجه، حتی اگر نمی دانید اندازه فونت پیش فرض چقدر خواهد بود، واحدهای rem برای مقیاس بندی عناصر CSS در رابطه با اندازه عنصر ریشه مفید هستند.

چرا از واحدهای rem استفاده می کنیم؟

همانطور که قبلا گفته شد، واحدهای rem اندازه عنصر ریشه را نشان می دهند. از آنجایی که کاربر می‌تواند اندازه پیش‌فرض این عنصر را در تنظیمات مرورگر خود تغییر دهد، صفحه وب می‌تواند برای مطابقت با اولویت‌های او مقیاس شود.

با این حال، استفاده از واحدهای مطلق مانند پیکسل ها موانع دسترسی را ایجاد می کند. پیکسل ها اندازه فونت اصلی سند را نادیده می گیرند، بنابراین تنظیمات برگزیده کاربر نادیده گرفته می شود. در نتیجه، در صورت امکان، از واحدهای rem برای هر عنصر مقیاس پذیر استفاده کنید.

اندازه فونت با واحدهای رم.

عیب اصلی استفاده از rem برای اندازه فونت این است که استفاده از مقادیر دشوار است. بیایید به برخی از اندازه‌های فونت آشنا که در واحدهای rem بیان شده‌اند نگاهی بیندازیم، با این فرض که اندازه پایه 16 پیکسل است:

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (پایه)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
نحو:

:root {
اندازه فونت: 1rem;
}

EM در css چیست؟

em یک واحد CSS است که اندازه قلم/اندازه متن را از بالای ارتفاع کلاهک تا پایین ترین نزول فونت اندازه می گیرد. em به این دلیل نامگذاری شد که در اصل برابر با عرض حرف بزرگ M بود.
توجه داشته باشید:– هنگامی که واحدهای EM در ویژگی font-size استفاده می شوند، اندازه مربوط به اندازه فونت والدین است. وقتی روی سایر ویژگی ها استفاده می شود، به اندازه فونت عنصر مربوط می شود.

عبارت اول در این مورد از مرجع والد استفاده می کند.

چرا از EM استفاده می کنیم؟

دلیل اصلی استفاده از em یا درصدها، اجازه دادن به کاربر برای تنظیم اندازه متن بدون ایجاد شکستن طرح است.

اندازه فونت با واحدهای em.

اندازه فونت برای متن مقیاس پذیر در em بیان می شود. یک em به طور پیش فرض برابر با 16 پیکسل یا 12pt است. مقدار آن متناسب با اندازه فونت عنصر والد است. نحو

سینتکس ویژگی CSS font-size (em) به شرح زیر است –

نحو:

:root {
اندازه فونت: 1em;
}

PX در Css چیست؟

هیچ ارتباطی با فونت فعلی ندارد و به ندرت به سانتی متر یا اینچ فیزیکی مربوط می شود. واحد px به‌گونه‌ای طراحی شده است که کوچک اما قابل مشاهده باشد، که اجازه می‌دهد یک خط افقی عریض 1 پیکسلی با لبه‌های تیز نمایش داده شود (بدون ضد aliasing)

چرا از px در css استفاده می کنیم؟

از آنجایی که ویژگی‌های px استاندارد واقعی بودند، اکثر نمونه‌های CSS در اینترنت از آنها استفاده می‌کنند. در مفهوم، pt، in و طیف گسترده‌ای از واحدهای دیگر را می‌توان استفاده کرد، اما مقادیر کوچک را به خوبی مدیریت نمی‌کردند، و شما را مجبور می‌کرد تا به تکه‌هایی متوسل شوید، که تایپ آن‌ها بسیار طولانی‌تر بود و استدلال در مورد آن دشوارتر بود. اگر می خواهید یک حاشیه نازک داشته باشید، می توانید از 1px با px استفاده کنید، اما withpt، باید از 0.75pt برای نتایج ثابت استفاده کنید، که ناخوشایند است.

نحو خاصیت اندازه قلم (px) CSS به شرح زیر است –

نحو:

:root {
اندازه فونت: 20px;
}