آشنایی با انواع واحد های اندازه گیری مطلق و نسبی – em , rem , px , % , vw , vh

واحدهای مطلق

واحدهایی مثل px به هیچ عنصر خاصی وابسته نیستند و همیشه مقدار ثابتی دارند. این نوع واحد برای ایجاد عناصر با ابعاد مشخص و ثابت مناسب است،

واحدهای نسبی

• em و rem
  • em: اندازه‌ای است که بر اساس سایز فونت عنصر والد تنظیم می‌شود؛ به عبارت دیگر، هر چه اندازه فونت والد تغییر کند، مقدار em نیز با آن تغییر خواهد کرد.
  • rem: اما نسبت به عنصر ریشه صفحه (یعنی html) تنظیم می‌شود. این ویژگی می‌تواند در طراحی‌های واکنش‌گرا مفید باشد، چرا که اگر سایز ریشه را تغییر دهید، تمامی عناصر فرزند که از واحد rem استفاده می‌کنند، به طور یکپارچه تغییر می‌کنند.
  • درصد: % : نسبت به اندازه والدش تغییر می‌کند. این واحد بسیار انعطاف‌پذیر است و امکان می‌دهد اندازه‌ها نسبت به هر عنصری که در آن قرار دارد، تغییر کند.
• vw (Viewport Width) و vh (Viewport Height)
  • vw درصدی از عرض صفحه مرورگر را نشان می‌دهد؛ به این ترتیب، اگر کاربر اندازه صفحه مرورگر خود را تغییر دهد، اندازه‌های با واحد vw هم تغییر می‌کنند.
  • vh درصدی از ارتفاع صفحه مرورگر است و عملکرد مشابهی با vw دارد. این دو واحد برای طراحی‌های واکنش‌گرا و ایجاد تطابق با ابعاد نمایشگر کاربر بسیار مناسب هستند.

انتخاب واحد اندازه در المنتور

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

تنظیم واحدهای ریشه در CSS

برای تنظیم اندازه متن پایه یا عناصر دیگر بر اساس ریشه صفحه (به عنوان مثال، ۱۶ پیکسل که به طور پیش‌فرض برای متن‌ها در مرورگرها استفاده می‌شود)، می‌توانید به تب پیشرفته در المنتور بروید، در بخش CSS سفارشی کد زیر را اضافه کنید:

:root {
font-size: 16px;
}

این کار به شما اجازه می‌دهد که از واحد rem برای تمام عناصر استفاده کرده و با یک تغییر کوچک در سایز ریشه، کل طراحی را تنظیم کنید.

راهنمای پیشنهادی برای استفاده از واحدهای اندازه‌گیری در المنتور

1. فاصله داخلی (Padding):

• em، px، %
  • استفاده از px برای فواصل داخلی زمانی مناسب است که بخواهید فاصله دقیقی ایجاد کنید. em نیز برای ایجاد فاصله‌های نسبی بر اساس اندازه متن داخلی عنصر کاربردی است و برای عناصر واکنش‌گرا که نسبت به والدشان تغییر می‌کنند، عالی است. درصد (%) نیز به شما امکان می‌دهد تا فاصله‌ها را به طور پویا نسبت به عرض والد تنظیم کنید.

1. فاصله خارجی (Margin):

• px، %
  • انتخاب px برای فاصله‌های خارجی در مواردی که ابعاد مشخص و غیر وابسته به سایز والد نیاز دارید، مناسب است. % برای زمانی که مارجین باید به صورت نسبی و وابسته به والد تنظیم شود، کاربردی است. این ترکیب می‌تواند به طراحی منسجم‌تر کمک کند.

1. متن‌ها:

• em، px
  • استفاده از em برای اندازه‌های متن، به تغییرات والدین وابسته است و اگر والد یک اندازه فونت خاص داشته باشد، اندازه متن بر اساس آن تنظیم می‌شود. px هم برای مواقعی که نیاز به اندازه‌ای ثابت دارید، مناسب است.

1. سربرگ‌ها:

• px، em، vw
  • برای سربرگ‌ها، px و em هر دو گزینه‌های خوبی هستند. با این حال، vw نیز می‌تواند کاربردی باشد تا سربرگ‌ها با عرض صفحه نمایش کاربر سازگار شوند. این رویکرد به خصوص در دستگاه‌های مختلف برای ایجاد سربرگ‌های واکنش‌گرا مؤثر است.

1. عرض (Width):

• px، %، vw
  • استفاده از px برای عرض ثابت، % برای عرض نسبی نسبت به والد، و vw برای تنظیم عرض بر اساس اندازه نمایشگر کاربر، همگی گزینه‌های مناسب هستند. این ترکیب به شما امکان می‌دهد تا برای هر عنصر متناسب با هدف طراحی، واحد مناسب را انتخاب کنید.

1. ارتفاع (Height):

• vh، px
  • vh برای ایجاد ارتفاعی وابسته به اندازه صفحه نمایش کاربرد دارد، در حالی که px برای ارتفاع ثابت مفید است. ترکیب این دو می‌تواند کنترل دقیق‌تری در طراحی ایجاد کند، به خصوص زمانی که نیاز به عناصر با ارتفاع خاص دارید.

1. عرض کانتینرهای داخلی در یک کانتینر:

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

این نکات می‌تواند به طراحان کمک کند تا با استفاده از واحدهای اندازه‌گیری مختلف، طرحی متناسب و واکنش گرا برای تمامی نمایشگرها ایجاد کنند.