CSS Viewport Units: یک شروع سریع

چند سالی است که واحدهای viewport برای اولین بار در CSS معرفی شده اند. آنها واقعاً “واحدهای طول پاسخگو” هستند به این معنا که با هر بار تغییر اندازه مرورگر ، مقدار آنها تغییر می کند. اگر قبلاً در مورد این واحدها چیزی شنیده اید اما هرگز با جزئیات در مورد آنها اطلاعاتی کسب نکرده اید ، این مقاله می تواند به شما کمک کند.

واحدها و معنی آنها

چهار واحد مبتنی بر viewport در CSS وجود دارد. اینها هستند vh، vw، vmin و vmax.

• ارتفاع Viewport (vh) این واحد براساس ارتفاع دهانه نمای ساخته شده است. یک مقدار از 1vh برابر با 1٪ از ارتفاع دید است.
• عرض Viewport (vw) این واحد براساس عرض ویوپورت ساخته شده است. یک مقدار از 1vw برابر است با 1٪ از عرض دید.
• حداقل Viewport (vmin) این واحد بر اساس بعد کوچکتر از ویوپورت. اگر ارتفاع نمای کوچکتر است از عرض ، مقدار 1vmin برابر با 1٪ از ارتفاع نمای نمایش خواهد بود. به طور مشابه ، اگر عرض نمای کوچکتر است از ارتفاع ، مقدار 1vmin برابر با 1٪ از عرض ویوپورت خواهد بود.
• Viewport Maximum (vmax) این واحد بر اساس بعد بزرگتر از ویوپورت. اگر ارتفاع نمای بزرگتر است از عرض ، مقدار 1vmax برابر با 1٪ از ارتفاع نمای نمایش خواهد بود. به طور مشابه ، اگر عرض نمای بزرگتر است از ارتفاع ، مقدار 1vmax برابر با 1٪ از عرض نمای hte خواهد بود.

بیایید ببینیم ارزش این واحدها در شرایط مختلف چقدر خواهد بود:

• اگر عرض تصویر 1200px عرض و 1000px ارتفاع باشد ، مقدار 10vw 120px خواهد بود و مقدار آن 10vh 100 پیکسل خواهد بود از آنجا که عرض ویوپورت از ارتفاع آن بیشتر است ، مقدار 10vmax 120px خواهد بود و مقدار آن 10vmin 100 پیکسل خواهد بود
• اگر دستگاه اکنون چرخانده شده است به طوری که ویوپورت به عرض 1000 پیکسل و ارتفاع 1200 پیکسل تبدیل می شود ، مقدار 10vh 120px خواهد بود و مقدار آن 10vw 100 پیکسل خواهد بود جالب توجه است ، ارزش 10vmax همچنان 120 پیکسل خواهد بود زیرا اکنون براساس ارتفاع دهانه نمای مشخص خواهد شد. به طور مشابه ، مقدار 10vmin همچنان 100 پیکسل خواهد بود.
• اگر اندازه پنجره مرورگر را به اندازه ای تغییر دهید که viewport به عرض 1000 پیکسل و 800 پیکسل ارتفاع تبدیل شود ، مقدار 10vh 80px خواهد شد و مقدار آن 10vw 100 پیکسل خواهد شد به طور مشابه ، مقدار 10vmax 100px خواهد شد و مقدار آن 10vmin 80 پیکسل خواهد شد

در این مرحله ، واحدهای viewport ممکن است شبیه درصد باشند. با این حال ، آنها بسیار متفاوت هستند. در مورد درصد ، عرض یا ارتفاع عنصر کودک با توجه به والدین آن تعیین می شود. مثالی در اینجا آورده شده است:

همانطور که مشاهده می کنید ، عرض اولین عنصر کودک برابر با 80٪ عرض والدین آن تنظیم شده است. با این حال ، عنصر کودک دوم دارای عرض 80vw است ، که باعث می شود آن از پدر و مادر خود گسترده تر باشد.

برنامه های کاربردی از واحدهای Viewport

از آنجا که این واحدها براساس ابعاد ویوپورت ساخته شده اند ، استفاده از آنها در شرایطی که باید عرض ، ارتفاع یا اندازه عناصر نسبت به دریچه مشاهده تنظیم شود بسیار راحت است.

تصاویر یا بخشهای صفحه تمام صفحه

تنظیم تصاویر پس زمینه روی عناصری که به طور کامل صفحه را پوشش می دهند بسیار معمول است. به همین ترتیب ، ممکن است بخواهید وب سایتی را طراحی کنید که هر بخش مربوط به یک محصول یا خدمات باید کل صفحه را پوشش دهد. در چنین شرایطی می توانید عرض عناصر مربوطه را برابر با 100٪ و ارتفاع آنها را برابر 100vh تنظیم کنید.

به عنوان مثال ، HTML زیر را در نظر بگیرید:

<div class="fullscreen a">
  <p>a<p>
</div>

با استفاده از CSS زیر می توانید به یک قسمت تصویر پس زمینه با عرض کامل دست پیدا کنید:

.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}

.a {
  background: url('path/to/image.jpg') center/cover;
}

هر دو اولین و دومین تصویر از Pixabay گرفته شده است.

تیترهای کاملاً متناسب ایجاد کنید

متن مناسب از پلاگین jQuery می توان برای مقیاس گذاری عناوین به گونه ای استفاده کرد که تمام عرض عنصر والد را اشغال کند. همانطور که قبلاً اشاره کردیم ، ارزش واحدهای viewport مستقیماً بر اساس اندازه viewport تغییر می کند. این به این معنی است که اگر برای تنظیم کردن از واحدهای viewport استفاده می کنید font-size برای عناوین شما ، کاملاً روی صفحه قرار می گیرند. هر زمان که عرض ویوپورت تغییر کند ، مرورگر همچنین به طور خودکار متن عنوان را به طور مناسب مقیاس بندی می کند. تنها کاری که باید انجام دهید این است که مقدار اولیه صحیح را برای آن مشخص کنید font-size از نظر واحدهای viewport.

یک مشکل اساسی در تنظیمات font-size این راه این است که اندازه متن بسته به دهانه نما بسیار متفاوت خواهد بود. به عنوان مثال ، الف font-size از 8vw برای تقریباً 96 پیکسل برای عرض ویوپورت 1200 پیکسل ، 33 پیکسل برای عرض ویوپورت 400 پیکسل و 154 پیکسل برای عرض ویوپورت 1920 پیکسل محاسبه خواهد شد. این می تواند فونت را خیلی بزرگ یا خیلی کوچک کند تا به خوبی خوانایی شود. با استفاده از ترکیبی از واحدها همراه با موارد ، می توانید درباره اندازه مناسب متن بیشتر بخوانید تابع calc () در این مقاله عالی در مورد تایپوگرافی مبتنی بر viewport.

عناصر خود را به راحتی مرکز کنید

وقتی می خواهید یک عنصر را دقیقاً در مرکز صفحه کاربر خود قرار دهید ، واحدهای Viewport می توانند بسیار مفید باشند. اگر از ارتفاع عنصر می دانید ، فقط باید مقدار بالا و پایین را تنظیم کنید margin خاصیت برابر بودن [(100 - height)/2]vh:

.centered {
  width: 60vw;
  height: 70vh;
  margin: 15vh auto;
}

با این حال ، امروزه ما می توانیم از Flexbox یا CSS Grid برای قرار دادن عناصر به صورت عمودی و افقی استفاده کنیم.

چیزهایی که باید در ذهن داشته باشید

اگر تصمیم دارید از واحدهای viewport در پروژه های خود استفاده کنید ، نکاتی وجود دارد که باید بخاطر بسپارید.

هنگام تنظیم عرض یک عنصر با استفاده از واحدهای viewport مراقب باشید. این به این دلیل است که وقتی overflow ویژگی روی عنصر ریشه روی تنظیم شده است auto، مرورگرها فرض می کنند که نوارهای پیمایشی وجود ندارد. این باعث می شود که عناصر کمی گسترده تر از حد انتظار شما باشند. مارک گذاری را با چهار عنصر div به صورت زیر در نظر بگیرید:

div {
  height: 50vh;
  width: 50vw;
  float: left;
}

به طور معمول ، انتظار هرکدام را دارید div یک چهارم صفحه موجود را اشغال کند. با این حال ، عرض هر یک div با فرض عدم وجود نوار پیمایشی محاسبه می شود. این باعث می شود که عناصر div کمی از عرض مورد نیاز برای عرض در کنار هم گسترده تر شوند.

تنظیم عرض divs از 50vw به 50% این مشکل را حل خواهد کرد نتیجه این است که هنگام تنظیم عرض برای عناصر بلوک ، باید از درصد استفاده کنید به طوری که نوارهای پیمایشی در محاسبه عرض آنها تداخلی ایجاد نکنند.

یک مسئله مشابه همچنین می تواند در دستگاه های تلفن همراه به دلیل وجود نوار آدرس رخ دهد که بسته به اینکه کاربر پیمایش می کند یا نه ، ممکن است ظاهر شود یا ناپدید شود. این باعث تغییر ارتفاع نمای نمایشگاهی می شود و کاربر هنگام مشاهده محتوا متوجه جهش های ناگهانی می شود.

پشتیبانی مرورگر

بر اساس داده های موجود در می توانم استفاده کنم، به نظر می رسد که هر مرورگر اصلی از این واحدها پشتیبانی می کند. با این حال ، هنوز چند اشکال و مشکل وجود دارد که باید هنگام استفاده از واحدهای viewport از آنها آگاه باشید. به عنوان مثال ، در Firefox یک مورد وجود دارد اشکال مستند جایی که 100vh هیچ تأثیری بر روی هیچ عنصری ندارد display خاصیت تنظیم شده بر روی table. باز هم ، Chrome از واحدهای viewport برای عرض حاشیه ، شکاف ستون ، مقادیر تبدیل ، سایه های جعبه یا داخل پشتیبانی نمی کند calc() تا نسخه 34. Caniuse را برای مشاهده لیست کاملی از اشکالات شناخته شده بررسی کنید.

نتیجه

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

مهارت های CSS خود را با استفاده از کتاب CSS Master ، نسخه 2 توسط Tiffany B. Brown به سطح بعدی برسانید – انیمیشن های CSS ، انتقال ها ، تحولات و موارد دیگر را پوشش می دهد.