همونطور که اطلاع دارید در جلسه قبل، مبحث متغیرهای CSS رو به پایان رسوندیم و تقریبا تمامی نکات مربوط به اون رو برای شما توضیح دادیم. در این جلسه قصد داریم در مورد unit یا واحدهای مربوط به Viewport توضیحاتی رو قرار بدیم. برای این مطلب از این لینک بعنوان منبع استفاده میکنیم.
همونطور که میدونین این واحدها مخصوص طراحی واکنشگرا هستند و هر زمان که مرورگرتون رو تغییر اندازه میدید، مقدار اونا نیز تغییر میکنه. اگر شما قبلا با این واحدها آشنا شدید و به خوبی اونا رو متوجه نشده اید، در این آموزش سعی میکنیم بصورت کامل اون رو بهتون آموزش بدیم.
همونطور که میدونین اون قسمتی از سایت که هر لحظه توسط کاربر میتونه دیده بشه رو Viewport میگن. شما با استفاده از اسکرول میتونین محتواهای زیر یا بالا رو حرکت بدین و در محدوده Viewport قرار بدین تا اونا رو مشاهده کنید. تصویر زیر رو ببینید:
هدف از این تصویر بهتر فهمیدن Viewport است. همونطور که میبینید Viewport نه کل صفحه دستگاه هست و نه کل صفحه مرورگر. بلکه Viewport اون اندازه ای از مرورگر هست که محتوای سایت در اون نمایش داده میشه.
4 واحد مربوط به Viewport در CSS وجود دارد که عبارتند از: vh و vw و vmin و vmax
حالا بیاید تعدادی مثال و حالت مختلف رو با هم بررسی کنیم تا این واحدها رو بهتر متوجه بشیم.
شاید پیش خودتون فکر کنید که واحدهای Viewport خیلی شبیه به همون واحدهای درصدی هستند. اما در واقعیت خیلی با هم تفاوت دارند. زمانی که از واحدهای درصدی یا % استفاده میکنید، مقدار طول و ارتفاع المنت فرزند، نسبت به طول و ارتفاع Parent خودش سنجیده میشه. مثال زیر رو در نظر بگیرید: همونطور که میبینید در بخش بالایی از واحد درصدی استفاده شده و به همین دلیل عرض المنت فرزند، برابر با 80% المنت Parent خودش شده است. اما در بخش پایینی از vw استفاده شده و به همین دلیل عرض المنت فرزند برابر با 80% کل Viewport قرار داده شده و ار المنت پدر خودش نیز بزرگتر شده است. بهمین راحتی.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
Source
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 303