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

دسته : آموزش رایگان CSS

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

استفاده از 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 می‌توانید طراحی‌های جذاب و منعطفی ایجاد کنید که به طور خودکار در انواع نمایشگرها بهینه باشند.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

پیمایش اشیاء و آرایه‌ها در جاوا اسکریپت: راهنمای کامل برای Object.keys، Object.values، for...in و for...of

پیمایش اشیاء و آرایه‌ها در جاوا اسکریپت: راهنمای کامل برای Object.keys، Object.values، for...in و for...of

4م مهر 1403

مطالعه بیشتر

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

استفاده از calc در CSS: محاسبات پویا برای طراحی‌های منعطف

12م آبان 1403

مطالعه بیشتر

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

آموزش استفاده از تگ‌های تصویری در HTML: نمایش و مدیریت تصاویر در صفحات وب

29م مرداد 1402

مطالعه بیشتر

آموزش مفاهیم پایه‌ای اشیاء در جاوا اسکریپت: تعریف، ویژگی‌ها و متدها

آموزش مفاهیم پایه‌ای اشیاء در جاوا اسکریپت: تعریف، ویژگی‌ها و متدها

2م شهریور 1403

مطالعه بیشتر

ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع

ایجاد Layout‌های واکنش‌گرا با flex-direction و justify-content در CSS Flexbox: راهنمای جامع

11م آبان 1403

مطالعه بیشتر

استفاده از Flexbox در CSS برای چیدمان‌های مدرن: راهنمای جامع و کاربردی

استفاده از Flexbox در CSS برای چیدمان‌های مدرن: راهنمای جامع و کاربردی

10م آبان 1403

مطالعه بیشتر

آموزش کامنت‌ها و کاراکترهای خاص در HTML و CSS: نحوه استفاده و مدیریت

آموزش کامنت‌ها و کاراکترهای خاص در HTML و CSS: نحوه استفاده و مدیریت

23م مرداد 1402

مطالعه بیشتر

آموزش ایجاد فرم با استفاده از HTML: طراحی فرم‌های ساده و کاربردی

آموزش ایجاد فرم با استفاده از HTML: طراحی فرم‌های ساده و کاربردی

21م مرداد 1402

مطالعه بیشتر

استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع

استفاده از display در CSS: تغییر نحوه نمایش عناصر - راهنمای جامع

9م آبان 1403

مطالعه بیشتر

آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب

آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب

12م آبان 1403

مطالعه بیشتر

آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination

آموزش ایجاد تگ‌های صفحه‌بندی در HTML و CSS: طراحی و استایل‌دهی pagination

29م مرداد 1402

مطالعه بیشتر

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

آموزش ایجاد یک پروژه ساده React: شروع کار و ساختاردهی کامپوننت‌ها

28م شهریور 1402

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد