واحدهای CSS مدرن: آموزش استفاده از vw، vh، vmin و vmax برای طراحی واکنش‌گرا

واحدهای مدرن CSS، مانند vw، vh، vmin و vmax، به شما امکان می‌دهند که اندازه‌ها را به صورت واکنش‌گرا و بر اساس ابعاد صفحه نمایش تعیین کنید. این واحدها در طراحی وب مدرن بسیار کاربردی هستند و به خصوص در ایجاد چیدمان‌های تطبیق‌پذیر و صفحات واکنش‌گرا (Responsive) کمک شایانی می‌کنند. در این مقاله، با هر یک از این واحدها آشنا می‌شویم و کاربردهای رایج آن‌ها را بررسی می‌کنیم.

واحدهای نمایشی در CSS: چرا vw، vh، vmin و vmax؟

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

واحد vw و کاربرد آن

واحد vw مخفف viewport width است و به معنای درصدی از عرض صفحه نمایش می‌باشد. به عنوان مثال، 1vw معادل 1 درصد از عرض صفحه نمایش است.

مثال استفاده از vw

.element {
  width: 50vw;
  background-color: #3498db;
}

در اینجا:

• عرض عنصر element برابر با 50 درصد از عرض کل صفحه نمایش خواهد بود. اگر عرض صفحه نمایش تغییر کند، عرض این عنصر نیز به تناسب تغییر خواهد کرد.

کاربردهای رایج vw

• تنظیم عرض تصاویر و بخش‌ها به صورت واکنش‌گرا.

• استفاده در طراحی‌های تطبیق‌پذیر، به ویژه برای دستگاه‌های با اندازه صفحه مختلف مانند موبایل و تبلت.

• ایجاد تایپوگرافی بزرگ و کوچک به صورت واکنش‌گرا.

واحد vh و کاربرد آن

واحد vh مخفف viewport height است و به درصدی از ارتفاع صفحه نمایش اشاره دارد. به عنوان مثال، 1vh معادل 1 درصد از ارتفاع صفحه نمایش است.

مثال استفاده از vh

.element {
  height: 100vh;
  background-color: #e74c3c;
}

در اینجا:

• ارتفاع عنصر element برابر با 100 درصد از ارتفاع کل صفحه نمایش خواهد بود و عنصر کل صفحه را پوشش می‌دهد.

کاربردهای رایج vh

• ایجاد بنرهای تمام‌صفحه و اسلایدها.

• تنظیم ارتفاع بخش‌ها به گونه‌ای که همواره یک بخش کامل از صفحه نمایش را پر کنند.

• استفاده در طراحی‌های تطبیق‌پذیر که نیاز به عناصر با ارتفاع پویا دارند.

واحد vmin و کاربرد آن

vmin مخفف viewport minimum است و مقدار آن برابر با کوچک‌ترین مقدار بین vw و vh است. این واحد در شرایطی که نیاز به مقیاس‌دهی بر اساس کوچک‌ترین بعد صفحه باشد، بسیار مفید است.

مثال استفاده از vmin

.element {
  width: 50vmin;
  height: 50vmin;
  background-color: #2ecc71;
}

در اینجا:

• عرض و ارتفاع عنصر برابر با 50 درصد از کوچک‌ترین بعد صفحه نمایش (عرض یا ارتفاع) خواهد بود. این کار باعث می‌شود که عنصر به‌طور یکنواخت در صفحه قرار گیرد و نسبت اندازه آن در دستگاه‌های مختلف ثابت بماند.

کاربردهای رایج vmin

• ایجاد عناصر مربعی که به صورت واکنش‌گرا در دستگاه‌های مختلف نمایش داده شوند.

• استفاده در طراحی‌های تطبیق‌پذیر که نیاز به اندازه‌دهی متناسب با کوچک‌ترین بعد صفحه دارند.

• ایجاد فونت‌های پویا که متناسب با کوچک‌ترین بعد صفحه باشند.

واحد vmax و کاربرد آن

vmax مخفف viewport maximum است و مقدار آن برابر با بزرگ‌ترین مقدار بین vw و vh است. این واحد برای مقیاس‌دهی بر اساس بزرگ‌ترین بعد صفحه نمایش کاربرد دارد.

مثال استفاده از vmax

.element {
  width: 50vmax;
  height: 50vmax;
  background-color: #9b59b6;
}

در اینجا:

• عرض و ارتفاع عنصر برابر با 50 درصد از بزرگ‌ترین بعد صفحه نمایش خواهد بود. این ویژگی باعث می‌شود که عنصر در دستگاه‌های مختلف به خوبی و متناسب با بزرگ‌ترین بعد صفحه نمایش داده شود.

کاربردهای رایج vmax

• استفاده در عناصر پس‌زمینه که نیاز به پوشش بیشتری دارند.

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

• استفاده در تایپوگرافی و عناصری که باید در بزرگ‌ترین بعد صفحه به خوبی نمایان شوند.

تفاوت واحدهای vw، vh، vmin و vmax

ایجاد تایپوگرافی واکنش‌گرا با vw و vmin

یکی از کاربردهای جالب واحدهای vw و vmin، تنظیم اندازه فونت‌ها به صورت واکنش‌گرا است. این کار باعث می‌شود که متن در دستگاه‌های مختلف به اندازه متناسب نمایش داده شود.

h1 {
  font-size: 5vw;
  color: #3498db;
}

در اینجا:

• اندازه فونت عنوان به 5 درصد عرض صفحه تنظیم شده و با تغییر عرض صفحه، به صورت خودکار تغییر می‌کند.

نکات و بهترین شیوه‌ها برای استفاده از vw، vh، vmin و vmax

• توجه به تجربه کاربری: از این واحدها در قسمت‌هایی استفاده کنید که نیاز به نمایش واکنش‌گرا دارند و بهینه بودن در صفحه نمایش‌های مختلف را فراهم می‌کنند.

• ترکیب واحدها برای طراحی‌های پیچیده‌تر: در بسیاری از موارد، ترکیب واحدهای vw، vh، vmin و vmax با یکدیگر یا با واحدهای ثابت مانند px به نتایج بهتری منجر می‌شود.

• استفاده در طراحی‌های تمام‌صفحه: این واحدها در طراحی بنرها و پس‌زمینه‌های تمام‌صفحه و نیز تنظیم اندازه فونت‌های پویا بسیار کاربرد دارند.

نتیجه‌گیری

واحدهای vw، vh، vmin و vmax در CSS ابزارهای بسیار قدرتمندی برای ایجاد طراحی‌های واکنش‌گرا و پویا هستند. این واحدها به شما امکان می‌دهند تا اندازه عناصر را به طور مستقیم بر اساس ابعاد صفحه نمایش تنظیم کنید و تجربه کاربری بهتری در دستگاه‌های مختلف ارائه دهید. با تمرین و آزمایش در پروژه‌های مختلف، می‌توانید از این واحدها برای بهبود چیدمان و طراحی سایت‌های خود بهره ببرید.