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

واحدهای اندازه‌گیری در المنتور

انتخاب واحد مناسب برای اندازه‌گیری ابعاد عناصر بسیار حائز اهمیت است. این واحدها به دسته‌های مختلف تقسیم می‌شوند که هر کدام کاربردهای خاص خود را دارند و در شرایط مختلف به کار می‌روند.

واحدهای مطلق

واحدهایی مانند px (پیکسل) ثابت هستند و هیچ وابستگی به عناصر دیگر یا اندازه‌های مختلف ندارند. این واحد به‌ویژه برای ایجاد عناصری با ابعاد ثابت و مشخص مناسب است.

واحدهای نسبی

واحدهای نسبی به اندازه‌های دیگر عناصر بستگی دارند و از انعطاف‌پذیری بیشتری برخوردارند:

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

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

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

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

برای تنظیم اندازه‌های پایه، مانند اندازه متن، می‌توانید از CSS سفارشی استفاده کنید. به‌طور مثال، با اضافه کردن کد زیر به بخش CSS سفارشی در المنتور، می‌توانید سایز پایه را تنظیم کنید:

:root {
    font-size: 16px;
}

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

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

در اینجا چند راهنمایی برای انتخاب واحد اندازه‌گیری برای برخی از المان‌ها در طراحی سایت آورده شده است:

• فاصله داخلی (Padding): استفاده از px زمانی مناسب است که بخواهید فاصله دقیقی ایجاد کنید. برای فاصله‌های نسبی که نسبت به اندازه متن تغییر می‌کنند، em و برای فاصله‌های واکنش‌گرا، درصد % گزینه‌های مناسبی هستند.
• فاصله خارجی (Margin): از px برای فاصله‌های ثابت و از % برای فاصله‌های نسبی استفاده کنید. این ترکیب به طراحی شما انعطاف‌پذیری بیشتری می‌دهد.
• متن‌ها: برای متن‌هایی که باید وابسته به اندازه والد تغییر کنند، استفاده از em مناسب است. اگر نیاز به اندازه ثابت دارید، px بهترین انتخاب است.
• سربرگ‌ها: برای سربرگ‌ها می‌توان از px و em استفاده کرد، اما vw نیز می‌تواند برای طراحی سربرگ‌های واکنش‌گرا مفید باشد.
• عرض (Width): برای عرض‌های ثابت از px، برای عرض نسبی نسبت به والد از % و برای تطابق با عرض نمایشگر از vw استفاده کنید.
• ارتفاع (Height): vh برای تنظیم ارتفاع وابسته به اندازه نمایشگر کاربرد دارد، در حالی که px برای ارتفاع‌های ثابت مفید است.
• عرض کانتینرهای داخلی: برای کانتینرهای داخلی که درون کانتینر دیگری قرار دارند، استفاده از % بهترین انتخاب است تا اندازه‌های داخلی به طور خودکار متناسب با عرض والد تغییر کنند.

جمع بندی

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