تسلط بر واحدهای Viewport در CSS: راهنمای جامع طراحی واکنش‌گرا

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

درک واحدهای Viewport

واحدهای Viewport، واحدهای طول نسبی در CSS هستند که بر اساس اندازه ویوپورت مرورگر تعیین می‌شوند. برخلاف واحدهای ثابت مانند پیکسل (px) که بدون توجه به اندازه صفحه نمایش ثابت می‌مانند، واحدهای viewport مقادیر خود را به صورت پویا بر اساس ابعاد ویوپورت تنظیم می‌کنند. این سازگاری آن‌ها را برای ایجاد چیدمان‌های سیال و واکنش‌گرا که در هر دستگاهی، از گوشی‌های هوشمند گرفته تا مانیتورهای بزرگ دسکتاپ، عالی به نظر می‌رسند، ایده‌آل می‌سازد. مزیت اصلی این است که طرح‌های ساخته شده با واحدهای viewport به طور هماهنگ مقیاس‌پذیر هستند و تناسبات و جذابیت بصری را در رزولوشن‌های مختلف صفحه نمایش حفظ می‌کنند.

واحدهای اصلی Viewport: vw, vh, vmin, vmax

• vw (عرض Viewport): نشان‌دهنده ۱٪ از عرض ویوپورت است. به عنوان مثال، 10vw برابر با ۱۰٪ از عرض ویوپورت است.
• vh (ارتفاع Viewport): نشان‌دهنده ۱٪ از ارتفاع ویوپورت است. به طور مشابه، 50vh معادل ۵۰٪ از ارتفاع ویوپورت است.
• vmin (حداقل Viewport): نشان‌دهنده مقدار کوچکتر بین vw و vh است. اگر عرض ویوپورت بیشتر از ارتفاع آن باشد، vmin برابر با vh خواهد بود. برعکس، اگر ارتفاع ویوپورت بیشتر از عرض آن باشد، vmin برابر با vw خواهد بود. این واحد برای حفظ تناسبات، به ویژه در عناصر مربعی یا نزدیک به مربع، مفید است.
• vmax (حداکثر Viewport): نشان‌دهنده مقدار بزرگتر بین vw و vh است. اگر عرض ویوپورت بیشتر از ارتفاع آن باشد، vmax برابر با vw خواهد بود. اگر ارتفاع ویوپورت بیشتر از عرض آن باشد، vmax برابر با vh خواهد بود. این واحد اغلب زمانی استفاده می‌شود که می‌خواهید یک عنصر بزرگترین بعد ممکن از ویوپورت را پر کند.

واحدهای منطقی Viewport: vi, vb

واحدهای منطقی جدیدتر ویوپورت، vi و vb، به ترتیب نسبت به ابعاد *خطی* (inline) و *بلوکی* (block) ویوپورت هستند. این واحدها به حالت نوشتن و جهت متن سند حساس هستند و این ویژگی آن‌ها را برای وب‌سایت‌های بین‌المللی بسیار مفید می‌سازد. این امر امکان ایجاد چیدمان‌هایی را فراهم می‌کند که ذاتاً با سیستم‌های نوشتاری مختلف سازگار هستند.

• vi (خطی Viewport): نشان‌دهنده ۱٪ از اندازه خطی ویوپورت است که جهتی است که محتوا به صورت افقی جریان دارد (مثلاً، از چپ به راست در اکثر زبان‌های غربی). در حالت نوشتن از چپ به راست، vi رفتاری مشابه vw دارد. با این حال، در حالت نوشتن از راست به چپ (مانند عربی یا عبری)، vi همچنان نمایانگر بعد افقی است اما از لبه سمت راست ویوپورت شروع می‌شود.
• vb (بلوکی Viewport): نشان‌دهنده ۱٪ از اندازه بلوکی ویوپورت است که جهتی است که محتوا به صورت عمودی جریان دارد. این واحد در اکثر حالت‌های نوشتاری رایج، مشابه vh است.

مثال: وب‌سایتی را در نظر بگیرید که هم برای زبان انگلیسی (چپ به راست) و هم برای زبان عربی (راست به چپ) طراحی شده است. استفاده از vi برای padding یا margin در کناره‌های یک کانتینر، به طور خودکار بر اساس جهت زبان به سمت صحیح تنظیم می‌شود و فاصله ثابت را بدون توجه به زبان کاربر تضمین می‌کند.

کاربردهای عملی واحدهای Viewport

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

۱. بخش‌های تمام-ارتفاع

ایجاد بخش‌های تمام-ارتفاع که کل ویوپورت را در بر می‌گیرند، یک الگوی طراحی رایج است. واحدهای Viewport این کار را فوق‌العاده آسان می‌کنند:

.full-height-section {
 height: 100vh;
 width: 100vw; /* Ensures it fills the full width as well */
}

این قطعه کد تضمین می‌کند که عنصر .full-height-section همیشه کل ارتفاع ویوپورت را اشغال کند، صرف نظر از اندازه صفحه نمایش. width: 100vw; نیز تضمین می‌کند که عنصر کل عرض را پر کند و یک بخش واقعاً تمام-ویوپورت ایجاد کند.

۲. تایپوگرافی واکنش‌گرا

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

h1 {
 font-size: 8vw; /* Font size scales with viewport width */
}

p {
 font-size: 2vh; /* Font size scales with viewport height */
}

در این مثال، font-size عنصر h1 روی 8vw تنظیم شده است، به این معنی که ۸٪ از عرض ویوپورت خواهد بود. با تغییر عرض ویوپورت، اندازه فونت نیز متناسب با آن تنظیم می‌شود. به طور مشابه، font-size عنصر p روی 2vh تنظیم شده و با ارتفاع ویوپورت مقیاس‌پذیر است.

۳. جعبه‌های با نسبت ابعاد مشخص

حفظ نسبت ابعاد برای تصاویر و ویدئوها می‌تواند چالش‌برانگیز باشد، اما واحدهای Viewport، در ترکیب با ترفند padding-top، یک راه‌حل ساده ارائه می‌دهند:

.aspect-ratio-box {
 width: 100%;
 position: relative;
}

.aspect-ratio-box::before {
 content: "";
 display: block;
 padding-top: 56.25%; /* 16:9 aspect ratio (height/width * 100) */
}

.aspect-ratio-box > * {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

این تکنیک از یک شبه‌عنصر (::before) با مقدار padding-top محاسبه شده بر اساس نسبت ابعاد مورد نظر (در این مورد، ۱۶:۹) استفاده می‌کند. سپس محتوای داخل .aspect-ratio-box به صورت absolute موقعیت‌دهی می‌شود تا فضای موجود را پر کند و نسبت ابعاد را صرف نظر از اندازه صفحه نمایش حفظ کند. این برای جاسازی ویدئوها یا تصاویری که نیاز به حفظ تناسبات خود دارند بسیار مفید است.

۴. ایجاد چیدمان‌های گرید سیال

واحدهای Viewport می‌توانند برای ایجاد چیدمان‌های گرید سیال استفاده شوند که در آن ستون‌ها و ردیف‌ها به طور متناسب با اندازه ویوپورت تنظیم می‌شوند. این می‌تواند به ویژه برای ایجاد داشبوردها و سایر چیدمان‌های پیچیده مفید باشد.

.grid-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Each column is at least 20% of the viewport width */
 grid-gap: 1vw;
}

.grid-item {
 padding: 1vw;
 background-color: #f0f0f0;
}

در اینجا، ویژگی grid-template-columns از minmax(20vw, 1fr) استفاده می‌کند تا اطمینان حاصل شود که هر ستون حداقل ۲۰٪ از عرض ویوپورت را داشته باشد اما بتواند برای پر کردن فضای موجود رشد کند. grid-gap نیز با استفاده از 1vw تنظیم شده است، که تضمین می‌کند فاصله بین آیتم‌های گرید به طور متناسب با اندازه ویوپورت مقیاس‌پذیر باشد.

۵. فاصله‌گذاری و Padding واکنش‌گرا

کنترل فاصله‌گذاری و padding با واحدهای Viewport، هماهنگی بصری ثابتی را در دستگاه‌های مختلف فراهم می‌کند. این تضمین می‌کند که عناصر بدون توجه به اندازه صفحه، بیش از حد فشرده یا بیش از حد پراکنده به نظر نرسند.

.container {
 padding: 5vw;
 margin-bottom: 3vh;
}

در این مثال، عنصر .container دارای padding به اندازه ۵٪ از عرض ویوپورت در همه طرف‌ها و یک margin پایینی به اندازه ۳٪ از ارتفاع ویوپورت است.

۶. عناصر رابط کاربری مقیاس‌پذیر

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

.button {
 font-size: 2.5vh;
 padding: 1vh 2vw;
 border-radius: 0.5vh;
}

کلاس .button با اندازه فونت بر اساس ارتفاع ویوپورت (2.5vh) و padding بر اساس ارتفاع و عرض ویوپورت تعریف شده است. این تضمین می‌کند که متن دکمه خوانا باقی بماند و اندازه دکمه با ابعاد مختلف صفحه به درستی تنظیم شود.

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

در حالی که واحدهای Viewport راهی قدرتمند برای ایجاد طرح‌های واکنش‌گرا ارائه می‌دهند، مهم است که از آن‌ها با دقت استفاده کرده و بهترین شیوه‌ها را برای جلوگیری از مشکلات احتمالی دنبال کنید:

۱. مقادیر حداقل و حداکثر را در نظر بگیرید

واحدهای Viewport گاهی اوقات می‌توانند در صفحه‌های بسیار کوچک یا بسیار بزرگ به مقادیر شدیدی منجر شوند. برای جلوگیری از این امر، از توابع CSS min()، max() و clamp() برای تعیین محدودیت‌های حداقل و حداکثر برای مقادیر واحدهای viewport استفاده کنید.

h1 {
 font-size: clamp(2rem, 8vw, 5rem); /* Font size is at least 2rem, at most 5rem, and scales with viewport width in between */
}

تابع clamp() سه آرگومان می‌گیرد: یک مقدار حداقل، یک مقدار ترجیحی و یک مقدار حداکثر. در این مثال، font-size حداقل 2rem و حداکثر 5rem خواهد بود و بین این محدودیت‌ها به طور متناسب با عرض ویوپورت (8vw) مقیاس‌پذیر خواهد بود. این از کوچک شدن بیش از حد متن در صفحه‌های کوچک یا بزرگ شدن بیش از حد آن در صفحه‌های بزرگ جلوگیری می‌کند.

۲. ترکیب با واحدهای دیگر

واحدهای Viewport زمانی بهترین عملکرد را دارند که با سایر واحدهای CSS مانند em، rem و px ترکیب شوند. این به شما امکان می‌دهد تا یک طراحی دقیق‌تر و انعطاف‌پذیرتر ایجاد کنید که هم اندازه ویوپورت و هم زمینه محتوا را در نظر می‌گیرد.

p {
 font-size: calc(1rem + 0.5vw); /* Base font size of 1rem plus a scaling factor */
 line-height: 1.6;
}

در این مثال، font-size با استفاده از تابع calc() محاسبه می‌شود که یک اندازه فونت پایه 1rem را به یک ضریب مقیاس‌پذیری 0.5vw اضافه می‌کند. این تضمین می‌کند که متن همیشه خوانا باشد، حتی در صفحه‌های کوچک، در حالی که همچنان به طور متناسب با اندازه ویوپورت مقیاس‌پذیر است.

۳. روی دستگاه‌ها و مرورگرهای مختلف تست کنید

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

۴. دسترس‌پذیری را در نظر بگیرید

هنگام استفاده از واحدهای Viewport برای تایپوگرافی، اطمینان حاصل کنید که متن برای کاربران دارای معلولیت خوانا و قابل دسترس باقی بماند. به کنتراست رنگ، اندازه فونت و ارتفاع خط توجه کنید تا اطمینان حاصل شود که متن برای همه کاربران به راحتی قابل خواندن است. ابزارهایی مانند بررسی کننده کنتراست WebAIM می‌توانند برای تعیین نسبت‌های کنتراست رنگ مناسب مفید باشند. همچنین، از تنظیم مستقیم font-size یا سایر ویژگی‌های مربوط به اندازه روی عنصر html با واحدهای viewport خودداری کنید، زیرا این کار می‌تواند با ترجیحات کاربر برای اندازه‌بندی متن تداخل داشته باشد.

۵. استفاده با متغیرهای CSS (ویژگی‌های سفارشی)

استفاده از متغیرهای CSS (ویژگی‌های سفارشی) با واحدهای Viewport قابلیت نگهداری را افزایش می‌دهد و امکان تنظیمات آسان‌تر را در سراسر stylesheet شما فراهم می‌کند.

:root {
 --base-padding: 2vw;
}

.element {
 padding: var(--base-padding);
}

.another-element {
 margin-left: var(--base-padding);
}

در این مثال، متغیر --base-padding با مقدار 2vw تعریف شده است. سپس این متغیر برای تنظیم padding و margin عناصر مختلف استفاده می‌شود و به شما این امکان را می‌دهد که با تغییر مقدار متغیر در یک مکان، به راحتی فاصله‌گذاری را در کل وب‌سایت خود تنظیم کنید.

تکنیک‌ها و ملاحظات پیشرفته

۱. استفاده از جاوا اسکریپت برای تنظیمات پویا

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

// JavaScript
function updateViewportVariables() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', updateViewportVariables);
updateViewportVariables(); // Initial call

// CSS
.element {
 height: calc(var(--vh, 1vh) * 50); /* Fallback to 1vh if --vh is not defined */
}

این قطعه کد از جاوا اسکریپت برای محاسبه ارتفاع ویوپورت و تنظیم یک متغیر CSS (--vh) بر اساس آن استفاده می‌کند. سپس عنصر .element از این متغیر برای تنظیم ارتفاع خود استفاده می‌کند و تضمین می‌کند که همیشه ۵۰٪ از ارتفاع ویوپورت را اشغال کند. مقدار جایگزین (fallback) به 1vh تضمین می‌کند که حتی اگر متغیر CSS به درستی تنظیم نشده باشد، عنصر همچنان ارتفاع معقولی داشته باشد.

۲. مدیریت نمایش صفحه‌کلید موبایل

در دستگاه‌های تلفن همراه، اندازه ویوپورت می‌تواند هنگام نمایش صفحه‌کلید مجازی تغییر کند. این می‌تواند باعث ایجاد مشکلاتی در چیدمان‌هایی شود که برای بخش‌های تمام-ارتفاع به واحدهای viewport متکی هستند. یک رویکرد برای کاهش این مشکل، استفاده از واحدهای Viewport بزرگ، کوچک و پویا است که به توسعه‌دهندگان اجازه می‌دهد رفتار را برای این سناریوها مشخص کنند. این واحدها با lvh، svh و dvh در دسترس هستند. واحد dvh با نمایش صفحه‌کلید نرم‌افزاری تنظیم می‌شود. توجه داشته باشید که پشتیبانی ممکن است در برخی از مرورگرهای قدیمی‌تر محدود باشد.

.full-height-section {
 height: 100dvh;
}

۳. بهینه‌سازی برای عملکرد

در حالی که واحدهای Viewport به طور کلی عملکرد خوبی دارند، استفاده بیش از حد از آن‌ها به طور بالقوه می‌تواند بر سرعت رندر صفحه تأثیر بگذارد. برای بهینه‌سازی عملکرد، از استفاده از واحدهای viewport برای هر عنصر در صفحه خودداری کنید. در عوض، بر استفاده استراتژیک از آن‌ها برای اجزای کلیدی چیدمان و تایپوگرافی تمرکز کنید. همچنین، تعداد دفعاتی که مقادیر واحدهای viewport را در جاوا اسکریپت دوباره محاسبه می‌کنید، به حداقل برسانید.

نمونه‌هایی در کشورها و فرهنگ‌های مختلف

زیبایی واحدهای Viewport در این است که به ایجاد یک تجربه کاربری ثابت در مناطق مختلف کمک می‌کنند. بیایید بررسی کنیم که چگونه واحدهای viewport می‌توانند با ملاحظات فرهنگی به کار گرفته شوند:

• زبان‌های شرق آسیا (مانند چینی، ژاپنی، کره‌ای): این زبان‌ها به دلیل پیچیدگی کاراکترها اغلب به اندازه‌های فونت بزرگ‌تری نیاز دارند. واحدهای Viewport خوانایی را در دستگاه‌های تلفن همراه که فضای صفحه نمایش محدود است، تضمین می‌کنند. استفاده از clamp() با حداقل اندازه فونت بالاتر بر اساس واحدهای rem در کنار vw می‌تواند بسیار مفید باشد.
• زبان‌های راست به چپ (مانند عربی، عبری): واحدهای viewport منطقی (vi, vb) برای حفظ جهت‌گیری و فاصله‌گذاری ثابت چیدمان، به ویژه هنگام کار با چیدمان‌های آینه‌ای و جریان محتوای تنظیم‌شده، بسیار ارزشمند هستند.
• کشورهایی با سرعت‌های اینترنت متفاوت: بهینه‌سازی اندازه تصاویر و اطمینان از زمان بارگذاری سریع بسیار مهم است. جعبه‌های با نسبت ابعاد مشخص که با واحدهای viewport ایجاد شده‌اند، به تصاویر و ویدئوها اجازه می‌دهند تا تناسبات خود را حفظ کنند در حالی که با اندازه‌های فایل کوچک‌تر برای بارگذاری سریع‌تر در اتصالات کندتر سازگار می‌شوند.
• دسترس‌پذیری در فرهنگ‌های مختلف: استفاده از ترکیبی از rem برای اندازه فونت پایه و vw برای مقیاس‌پذیری، به کاربران انعطاف‌پذیری می‌دهد تا اندازه‌بندی را بر اساس نیازهای فردی خود، صرف نظر از موقعیت جغرافیایی یا زمینه فرهنگی‌شان، تغییر دهند. ارائه گزینه‌هایی برای کاربران جهت تنظیم اندازه فونت، به طور جهانی مفید است.

نتیجه‌گیری

واحدهای Viewport در CSS ابزاری ضروری برای ایجاد طرح‌های وب واقعاً واکنش‌گرا و مقیاس‌پذیر هستند که به طور یکپارچه با هر دستگاهی سازگار می‌شوند. با درک عملکرد vw, vh, vmin, vmax, vi, و vb و پیروی از بهترین شیوه‌ها، می‌توانید پتانسیل کامل واحدهای viewport را آزاد کرده و وب‌سایت‌هایی جذاب از نظر بصری و کاربرپسند ایجاد کنید که تجربه‌ای ثابت را در همه پلتفرم‌ها ارائه می‌دهند. این واحدها را برای ساخت تجربیات وب که در سطح جهانی قابل دسترس و از نظر زیبایی‌شناختی دلپذیر هستند، صرف نظر از دستگاه یا زمینه فرهنگی کاربر، به کار بگیرید.

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