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

همونطور که اطلاع دارید در جلسه قبل، مبحث متغیرهای CSS رو به پایان رسوندیم و تقریبا تمامی نکات مربوط به اون رو برای شما توضیح دادیم. در این جلسه قصد داریم در مورد unit یا واحدهای مربوط به Viewport توضیحاتی رو قرار بدیم. برای این مطلب از این لینک بعنوان منبع استفاده میکنیم.

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

همونطور که میدونین اون قسمتی از سایت که هر لحظه توسط کاربر میتونه دیده بشه رو Viewport میگن. شما با استفاده از اسکرول میتونین محتواهای زیر یا بالا رو حرکت بدین و در محدوده Viewport قرار بدین تا اونا رو مشاهده کنید. تصویر زیر رو ببینید:

هدف از این تصویر بهتر فهمیدن Viewport است. همونطور که میبینید Viewport نه کل صفحه دستگاه هست و نه کل صفحه مرورگر. بلکه Viewport اون اندازه ای از مرورگر هست که محتوای سایت در اون نمایش داده میشه.

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

4 واحد مربوط به Viewport در CSS وجود دارد که عبارتند از: vh و vw و vmin و vmax

• Viewport Height یا vh : این واحد بر پایه ارتفاع Viewport هست. برای مثال مقدار 1vh برابر با 1% ارتفاع کل Viewport است. پس 100vh برابر با کل ارتفاع Viewport خواهد بود.
• Viewport Width یا vw : این واحد بر پایه عرض Viewport هست. برای مثال مقدار 1vw برابر با 1% عرض کل Viewport است.
• Viewport Minimum یا vmin : این واحد بر پایه کوچکترین بعد Viewport است. همونطور که میدونین Viewport دو بعد داره که شامل عرض و ارتفاع میشه. پس زمانی که این واحد رو مورد استفاده قرار میدیم، در ابتدا بصورت اتوماتیک اندازه ارتفاع و عرض Viewport با هم مقایسه میشه و هر کدام که کوچکتر بود، 1% اون برابر با 1vmin خواهد شد.
• Viewport Maximum یا vmax : در اینجا قضیه برعکس حالت بالا هست و vmax بر پایه بزرگترین بعد Viewport است.

حالا بیاید تعدادی مثال و حالت مختلف رو با هم بررسی کنیم تا این واحدها رو بهتر متوجه بشیم.

• اگر عرض و ارتفاع Viewport به ترتیب 1200 و 1000 پیکسل باشد، مقدار 10vw برابر با 120 پیکسل و مقدار 10vh برابر با 100 پیکسل خواهد بود. بدلیل اینکه عرض Viewport از ارتفاع بزرگتر است، پس مقدار 10vmax  برابر با 120 پیکسل و مقدار 10vmin برابر با 100 پیکسل خواهد بود.
• حالا اگر دستگاه مورد نظر رو بچرخونیم، پس عرض و ارتفاع اون عوض میشه و به ترتیب 1000 و 1200 پیکسل خواهد شد. پس در این حالت 10vh برابر با 120 پیکسل و 10vw برابر با 100 پیکسل و مقدار 10vmin و 10vmax نیز همانند حالت قبل خواهد بود.

شاید پیش خودتون فکر کنید که واحدهای Viewport خیلی شبیه به همون واحدهای درصدی هستند. اما در واقعیت خیلی با هم تفاوت دارند. زمانی که از واحدهای درصدی یا % استفاده میکنید، مقدار طول و ارتفاع المنت فرزند، نسبت به طول و ارتفاع Parent خودش سنجیده میشه. مثال زیر رو در نظر بگیرید: همونطور که میبینید در بخش بالایی از واحد درصدی استفاده شده و به همین دلیل عرض المنت فرزند، برابر با 80% المنت Parent خودش شده است. اما در بخش پایینی از vw استفاده شده و به همین دلیل عرض المنت فرزند برابر با 80% کل Viewport قرار داده شده و ار المنت پدر خودش نیز بزرگتر شده است. بهمین راحتی.

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

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

موفق باشید

یا علی

Source