عمق درک اندازه قلم (PX در مقابل EM در مقابل REM)

درک اندازه قلم

اندازه قلم نقش بسیار مهمی در وب دارد ، اندازه قلم یکی از خصوصیات css است ، اندازه فونت یا اندازه متن تعریف می کند که اندازه شخصیت ها در صفحه وب چقدر بزرگ است. یک قلم معمولاً در نقاط (pt) اندازه گیری می شود و معمولاً در پیکسل (px) تعریف می شود.

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

1. اندازه مطلق یا اندازه نسبی
2. به عنوان یک طول یا درصد (نسبت به اندازه قلم عنصر والدین)

نحو اساسی

نحوی اساسی فونت

اندازه مطلق
xx-small، x-small، xx-large، x-large، large
اندازه قلم با کلمات کلیدی اندازه مطلق ، نسبت به اندازه قلم عنصر والدین بزرگتر یا کوچکتر خواهد بود.

اندازه نسبی
کوچکتر ، بزرگتر

طول-اندازه
اندازه قلم تعریف شده در طول همیشه مقدار مثبت خواهد بود ، واحدهای نسبی قلم مانند em و px استفاده می شوند

درصد-اندازه
اندازه قلم با درصد همیشه مقدار مثبت و نسبت به اندازه قلم عنصر والدین خواهد بود

اندازه قلم را در بدن تعریف کنید

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

اندازه قلم در پیکسل (Px)

تعریف اندازه قلم در پیکسل روش خوبی نیست. این تنها درصورتی خوب است که شما می توانید طراحی پیکسل کامل را مدیریت کنید.
 Pixel (px) یک مقدار استاتیک است ، px یک مرورگر مستقل از سیستم عامل و متقابل است که به مرورگرها می گوید تا حروف را دقیقاً در تعداد پیکسل هایی که مشخص کرده اید ، ارائه دهند. نتایج ممکن است در مرورگرها کمی متفاوت باشد ، زیرا هر مرورگر برای رسیدن به یک اثر مشابه از الگوریتم ها و رویکردهای مختلفی استفاده می کند.
 هنگامی که اندازه قلم را در پیکسل (px) تعریف می کنید ، ممکن است برای نوشتن مقداری css اضافی برای مدیریت صفحه با پاسخگویی روبرو شوید. و شما باید CSS را در هر نقطه شکست بنویسید.

اندازه قلم در EM

روش دیگر برای تعیین اندازه فونت با مقادیر em است. اندازه یک مقدار em پویا است. وقتی اندازه قلم را در em تعریف می کنیم ، به اندازه عنصر والدین بستگی دارد.
 اگر اندازه قلم را برای والدین تنظیم نکرده ایم ، به طور پیش فرض اندازه فونت مرورگر را خواهد گرفت ، یعنی 16 پیکسل.
 مهمترین چیزهایی که با em باید بدانید این است که همیشه به اندازه قلم والدین بستگی دارد. بنابراین اگر شما قلم را در عنصر لانه دار تعریف می کنید ، باید این مسئله را در ذهن خود نگه دارید تا اندازه قلم را تنظیم کنید.

پیکسل برای تبدیل ایمیل

اندازه قلم در REM

مقادیر Remote اندازه فونت برای غلبه بر مشکل em با عنصر تو در تو اختراع شد.
 مقادیر Remont اندازه فونت نسبت به عنصر root html است و نه عنصر والد ، استراحت همه چیز همانند em است.
 در زیر تفاوت بین Rem و Em در صورت وجود عناصر تو در تو وجود دارد.

تفاوت بین عناصر Nested با EM و REM

تکمیل عنصر با EMبا REM فاقد المان شد

Ref: https://developer.mozilla.org/en-US/docs/Web