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

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

آشنایی با Viewport

Viewport به ناحیه‌ای از صفحه اشاره دارد که کاربران می‌توانند بدون نیاز به اسکرول، مشاهده کنند. اندازه Viewport در دستگاه‌های مختلف (مانند دسکتاپ، تبلت و موبایل) متفاوت است و CSS قابلیت‌های مختلفی را برای تنظیم عناصر متناسب با اندازه Viewport فراهم می‌کند.

به عنوان مثال:

• در دسکتاپ، Viewport معمولاً بزرگ‌تر است.

• در موبایل، Viewport کوچک‌تر است و ممکن است کاربر نیاز به اسکرول داشته باشد.

معرفی واحدهای Viewport

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

واحدهای رایج Viewport

• vw (Viewport Width): یک واحد vw برابر با 1٪ از عرض Viewport است.

• vh (Viewport Height): یک واحد vh برابر با 1٪ از ارتفاع Viewport است.

• vmin: کوچکتر از عرض و ارتفاع Viewport را می‌گیرد و 1٪ آن را نشان می‌دهد.

• vmax: بزرگتر از عرض و ارتفاع Viewport را می‌گیرد و 1٪ آن را نشان می‌دهد.

مثال‌هایی از استفاده از واحدهای Viewport

استفاده از vw و vh برای تنظیم عرض و ارتفاع

.full-width-box {
  width: 100vw;
  height: 50vh;
  background-color: lightblue;
}

در اینجا:

• width: 100vw عرض عنصر را برابر با 100٪ عرض Viewport تعیین می‌کند.

• height: 50vh ارتفاع عنصر را برابر با 50٪ ارتفاع Viewport تنظیم می‌کند.

استفاده از vmin برای اندازه‌دهی متناسب

.square-box {
  width: 50vmin;
  height: 50vmin;
  background-color: lightcoral;
}

در اینجا:

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

استفاده از vmax برای حداکثر اندازه‌دهی

.banner {
  font-size: 5vmax;
}

در اینجا:

• font-size: 5vmax اندازه فونت را بر اساس بزرگترین بعد Viewport تنظیم می‌کند، که برای حفظ وضوح متون در دستگاه‌های مختلف مناسب است.

کاربردهای رایج Viewport Units در طراحی وب

ساخت بخش‌های تمام صفحه

واحدهای Viewport می‌توانند برای ایجاد بخش‌هایی با اندازه تمام صفحه استفاده شوند.

.full-screen-section {
  width: 100vw;
  height: 100vh;
  background: url('background.jpg') no-repeat center center;
  background-size: cover;
}

در اینجا:

• بخش full-screen-section کل صفحه را پوشش می‌دهد و برای طراحی‌های تک صفحه‌ای و اسلاید‌ها بسیار مناسب است.

تنظیم فونت واکنش‌گرا

با استفاده از واحدهای Viewport، می‌توانید فونت‌هایی بسازید که نسبت به اندازه صفحه واکنش‌گرا باشند.

.responsive-heading {
  font-size: 3vw;
}

در اینجا:

• font-size: 3vw باعث می‌شود که اندازه فونت متناسب با عرض Viewport تنظیم شود و در دستگاه‌های مختلف به صورت پویا تغییر کند.

ساخت بخش‌های منطبق با نسبت ابعاد

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

.aspect-ratio-box {
  width: 100vw;
  height: 56.25vw; /* برای نسبت 16:9 */
}

در اینجا:

• height: 56.25vw ارتفاع با نسبت 16:9 تنظیم شده تا در نمایشگرهای مختلف نسبت تصویر ثابت بماند.

ترکیب واحدهای Viewport با واحدهای دیگر در CSS

گاهی اوقات برای طراحی‌های پیچیده‌تر، می‌توانید واحدهای Viewport را با سایر واحدهای CSS مانند پیکسل یا درصد ترکیب کنید.

مثال ترکیب vw با padding ثابت

.responsive-box {
  width: calc(100vw - 20px);
  height: 50vh;
  padding: 10px;
  background-color: lightgreen;
}

در اینجا:

• calc(100vw - 20px) عرض عنصر را متناسب با عرض Viewport تعیین می‌کند، اما 20 پیکسل از هر دو طرف کسر می‌کند تا فضای مناسبی ایجاد شود.

نکات و بهترین شیوه‌ها برای استفاده از واحدهای Viewport

• توجه به تغییرات اندازه Viewport در دستگاه‌های مختلف: در موبایل و تبلت‌ها، به خصوص در حالت افقی و عمودی، Viewport تغییر می‌کند. به این موضوع در هنگام طراحی توجه کنید.

• ترکیب واحدهای Viewport با Media Queries: برای دستیابی به طراحی‌های واکنش‌گرا، می‌توانید واحدهای Viewport را همراه با Media Queries استفاده کنید.

• استفاده از vmin و vmax در طراحی‌های متناسب: برای عناصر مربعی یا دایره‌ای که باید در دستگاه‌های مختلف نسبت ثابت داشته باشند، از vmin یا vmax استفاده کنید.

نتیجه‌گیری

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