دسته : آموزش رایگان CSS
Viewport در طراحی وب به بخش قابل مشاهده یک صفحه در مرورگر یا دستگاه کاربر گفته میشود و بسته به اندازه صفحه نمایش، متغیر است. واحدهای Viewport مانند vw، vh، vmin و vmax در CSS، امکان استفاده از اندازههای وابسته به Viewport را فراهم میکنند. این واحدها به خصوص در طراحیهای واکنشگرا بسیار مفید هستند. در این مقاله، به معرفی Viewport و واحدهای مرتبط با آن میپردازیم و کاربردهای آنها در CSS را بررسی میکنیم.
Viewport به ناحیهای از صفحه اشاره دارد که کاربران میتوانند بدون نیاز به اسکرول، مشاهده کنند. اندازه Viewport در دستگاههای مختلف (مانند دسکتاپ، تبلت و موبایل) متفاوت است و CSS قابلیتهای مختلفی را برای تنظیم عناصر متناسب با اندازه Viewport فراهم میکند.
به عنوان مثال:
در دسکتاپ، Viewport معمولاً بزرگتر است.
در موبایل، Viewport کوچکتر است و ممکن است کاربر نیاز به اسکرول داشته باشد.
واحدهای Viewport به شما امکان میدهند که اندازه عناصر را بر اساس اندازه Viewport تعیین کنید. این واحدها بسیار واکنشپذیر هستند و به خصوص در طراحیهای پاسخگو مفید واقع میشوند.
vw (Viewport Width): یک واحد vw برابر با 1٪ از عرض Viewport است.
vh (Viewport Height): یک واحد vh برابر با 1٪ از ارتفاع Viewport است.
vmin: کوچکتر از عرض و ارتفاع Viewport را میگیرد و 1٪ آن را نشان میدهد.
vmax: بزرگتر از عرض و ارتفاع Viewport را میگیرد و 1٪ آن را نشان میدهد.
.full-width-box {
width: 100vw;
height: 50vh;
background-color: lightblue;
}
در اینجا:
width: 100vw عرض عنصر را برابر با 100٪ عرض Viewport تعیین میکند.
height: 50vh ارتفاع عنصر را برابر با 50٪ ارتفاع Viewport تنظیم میکند.
.square-box {
width: 50vmin;
height: 50vmin;
background-color: lightcoral;
}
در اینجا:
50vmin به عنوان اندازه هر ضلع مربع انتخاب شده که در دستگاههای مختلف نسبت ثابتی خواهد داشت.
.banner {
font-size: 5vmax;
}
در اینجا:
font-size: 5vmax اندازه فونت را بر اساس بزرگترین بعد Viewport تنظیم میکند، که برای حفظ وضوح متون در دستگاههای مختلف مناسب است.
واحدهای 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 مانند پیکسل یا درصد ترکیب کنید.
مثال ترکیب vw با padding ثابت
.responsive-box {
width: calc(100vw - 20px);
height: 50vh;
padding: 10px;
background-color: lightgreen;
}
در اینجا:
calc(100vw - 20px) عرض عنصر را متناسب با عرض Viewport تعیین میکند، اما 20 پیکسل از هر دو طرف کسر میکند تا فضای مناسبی ایجاد شود.
توجه به تغییرات اندازه Viewport در دستگاههای مختلف: در موبایل و تبلتها، به خصوص در حالت افقی و عمودی، Viewport تغییر میکند. به این موضوع در هنگام طراحی توجه کنید.
ترکیب واحدهای Viewport با Media Queries: برای دستیابی به طراحیهای واکنشگرا، میتوانید واحدهای Viewport را همراه با Media Queries استفاده کنید.
استفاده از vmin و vmax در طراحیهای متناسب: برای عناصر مربعی یا دایرهای که باید در دستگاههای مختلف نسبت ثابت داشته باشند، از vmin یا vmax استفاده کنید.
واحدهای Viewport در CSS ابزارهای بسیار کاربردی برای ایجاد طراحیهای واکنشگرا هستند. این واحدها به شما امکان میدهند که عناصر خود را به صورت متناسب و پویا با اندازههای مختلف نمایش دهید و تجربه کاربری بهتری را ارائه کنید. با درک و استفاده صحیح از vw، vh، vmin و vmax میتوانید طراحیهای جذاب و منعطفی ایجاد کنید که به طور خودکار در انواع نمایشگرها بهینه باشند.
نظری یافت نشد
مدیریت خطاها در Async/Await و Promises در جاوا اسکریپت: راهنمای کامل با مثالهای عملی
30م مهر 1403
مطالعه بیشتر
مقدمهای بر Node.js و کار با جاوا اسکریپت سمت سرور: آموزش اولیه و اصولی
4م آبان 1403
مطالعه بیشتر
آموزش مفاهیم پایهای اشیاء در جاوا اسکریپت: تعریف، ویژگیها و متدها
2م شهریور 1403
مطالعه بیشتر
آشنایی با انواع انتخابگرها و تغییر پسزمینه با CSS: راهنمای جامع
4م شهریور 1402
مطالعه بیشتر
آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایلدهی حرفهای به متنها
5م شهریور 1402
مطالعه بیشتر
آموزش CSS Blend Modes: ادغام رنگها و تصاویر برای طراحی وب جذاب
9م آبان 1403
مطالعه بیشتر
آموزش توسعه بازیهای ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام
5م آبان 1403
مطالعه بیشتر
کار با فیلترهای CSS: آموزش استفاده از blur، brightness و contrast برای افکتهای تصویری جذاب
11م آبان 1403
مطالعه بیشتر
آموزش مدیریت Box Model و ترکیب اجزای آن با CSS: کنترل دقیق فاصلهها و ابعاد عناصر
5م شهریور 1402
مطالعه بیشتر
آموزش توسعه و مدیریت پروژههای بزرگ در جاوا اسکریپت: آشنایی با ابزارها و فریمورکهای کاربردی
4م آبان 1403
مطالعه بیشتر
آموزش کامل ویژگی background در CSS: تنظیمات پسزمینه برای طراحی وب راهنمای جامع
5م شهریور 1402
مطالعه بیشتر
آموزش جامع اینترفیسها و کلاسها (Classes) در ES6 جاوا اسکریپت: مفاهیم و کاربردها
28م مهر 1403
مطالعه بیشتر
تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد