آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 46) : آشنایی با واحدهای Viewport - قسمت 2

همونطور که اطلاع دارید در جلسه قبل موضوع واحدهای Viewport رو شروع کردیم و توضیحات مقدماتی رو در مورد اونا دادیم و شما رو با اونا آشنا کردیم. در این جلسه قصد داریم تعدادی از موارد کاربردی برای این واحدها رو به شما توضیح بدیم.

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

از اونجایی که این واحدها بر پایه ابعاد Viewport هستند، پس معمولا در جاهایی که نیاز داریم عرض و ارتفاع المنت مورد نظر نسبتی از Viewport باشه، از این موارد استفاده میشه. در اینجا تعدادی مثال کاربردی رو بررسی میکنیم تا بهتر با اونا آشنا بشید.

مثال 1 : بخش یا تصویر پس زمینه تمام صفحه

همونطور که میدونین قرار دادن تصویر پس زمینه بصورت تمام صفحه یک کار متداول و پرطرفدار است. فرض کنید که شما میخواید یک وبسایت رو طراحی کنید که هر بخش مربوط به محصول یا خدمات، به تنهایی تمام صفحه رو پوشش بده. در این شرایط شما میتونین عرض اون المنت یا بخشها رو برابر با 100% و ارتفاع اونا رو نیز برابر با 100vh قرار بدین. فرض کنید که هر بخش کد HTML بصورت زیر داشته باشه:

کد CSS زیر رو برای اون قرار میدیم:

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

مثال 2 : راه آسان برای قرار دادن المنتها در مرکز

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

همونطور که میبینید ارتفاع این المنت 70vh است و اگر اون رو از 100 کم کنیم، 30 خواهد شد و با تقسیم شدن بر 2 به مقدار 15vh خواهیم رسید. با اینکار خروجی بصورت زیر میشه: بهمین راحتی. میبینید که المنت مورد نظر از نظر عمودی در مرکز قرار گرفته.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source