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

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثال‌های عملی

مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثال‌های عملی

30م مهر 1403

مطالعه بیشتر

مقدمه‌ای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی

مقدمه‌ای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی

4م آبان 1403

مطالعه بیشتر

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

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

2م شهریور 1403

مطالعه بیشتر

آشنایی با انواع انتخاب‌گرها و تغییر پس‌زمینه با CSS: راهنمای جامع

آشنایی با انواع انتخاب‌گرها و تغییر پس‌زمینه با CSS: راهنمای جامع

4م شهریور 1402

مطالعه بیشتر

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

5م شهریور 1402

مطالعه بیشتر

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

آموزش CSS Blend Modes: ادغام رنگ‌ها و تصاویر برای طراحی وب جذاب

9م آبان 1403

مطالعه بیشتر

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

5م آبان 1403

مطالعه بیشتر

کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب

کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکت‌های تصویری جذاب

11م آبان 1403

مطالعه بیشتر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصله‌ها و ابعاد عناصر

5م شهریور 1402

مطالعه بیشتر

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

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

4م آبان 1403

مطالعه بیشتر

آموزش کامل ویژگی background در CSS: تنظیمات پس‌زمینه برای طراحی وب راهنمای جامع

آموزش کامل ویژگی background در CSS: تنظیمات پس‌زمینه برای طراحی وب راهنمای جامع

5م شهریور 1402

مطالعه بیشتر

آموزش جامع اینترفیس‌ها و کلاس‌ها (Classes) در ES6 جاوا اسکریپت: مفاهیم و کاربردها

آموزش جامع اینترفیس‌ها و کلاس‌ها (Classes) در ES6 جاوا اسکریپت: مفاهیم و کاربردها

28م مهر 1403

مطالعه بیشتر

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