CSS Viewport Units: Quick Start. واحدهای vh، vw، vmin، vmax

واحدهای نسبی جدید در CSS3 مانند vh، vw، vmin، vmax اضافه شده‌اند. این واحدها نسبت به اندازه پنجره مرورگر محاسبه می شوند. برای دسکتاپ ها، پنجره مرورگر عریض تر از viewport است (با افزودن عرض نوار اسکرول)، بنابراین اگر عرض عنصر را روی 100vw تنظیم کنید، از html خارج می شود.

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

IE: 9.0 به جز vmax، به جای vmin از vm استفاده کنید
حاشیه، غیرمتمرکز: 12.0 به جز vmax، به جای vmin از vm استفاده کنید
فایرفاکس: 19.0
کروم: 26.0
اپرا: 15.0
سافاری: 6.1
iOS Safari: 8.0
اندروید: 4.4
کروم برای اندروید: 55.0

1. واحدهای vh و vw

تکنیک های طراحی وب ریسپانسیو بر اساس استفاده از درصد است. اما درصدها با بهترین راه حل برای هر مورد فاصله زیادی دارند، زیرا آنها نسبت به اندازه نزدیکترین عنصر والد محاسبه می شوند. بنابراین اگر می خواهید از ارتفاع و عرض پنجره مرورگر استفاده کنید، بهتر است از واحدهای vh و vw استفاده کنید. به عنوان مثال، اگر ارتفاع پنجره مرورگر 900px باشد، 1vh 9px خواهد بود. به همین ترتیب، اگر عرض پنجره مرورگر 1600 پیکسل باشد، 1vw برابر با 16 پیکسل خواهد بود.

1.1. تصویر پس زمینه تمام صفحه پاسخگو

از آنجایی که عرض عنصر مشخص شده با 100vw بزرگتر از عرض viewport است، بهتر است از عرض 100% برای ایجاد تصاویر پس زمینه تمام صفحه استفاده کنید که برابر با عرض عنصر root html خواهد بود.

تمام صفحه-bg (پس‌زمینه: url (image.jpg)؛ موقعیت پس‌زمینه: مرکز؛ اندازه پس‌زمینه: پوشش؛ عرض: 100٪؛ ارتفاع: 100 ولت ساعت؛) برنج. 2. تصویر پس زمینه تمام صفحه پاسخگو

1.2. افکت اسلاید تمام صفحه

برای اینکه بلوک با تمام ارتفاع پنجره مرورگر مطابقت داشته باشد، باید ارتفاع را تنظیم کنید: 100%؛ برای سه عنصر - html، بدنه و مستقیماً برای خود بلوک:

بخش Html، بدنه (ارتفاع: 100%؛) (ارتفاع: 100%؛)

از آنجایی که درصدها نسبت به مقادیر عناصر والد هستند، باید مقادیر مناسب را برای هر عنصر DOM تنظیم کنید. واحد vh نیازی به تنظیم مقادیر در طول زنجیره ندارد، زیرا مقدار آن مستقیماً نسبت به پنجره مرورگر محاسبه می شود:

بخش (ارتفاع: 100vh؛)

اثر برگرداندن اسلایدها هنگام کلیک بر روی یک فلش با استفاده از یک اسکریپت کوچک جی کوئری اجرا می شود:

JQuery (سند) آماده (عملکرد ($) ($ ("nav"). روشن ("کلیک کنید"، تابع () (اگر ($ (این) .hasClass ("پایین")) (var movePos = $ (پنجره ) .scrollTop () + $ (پنجره) .height ();) if ($ (this) .hasClass ("بالا")) (var movePos = $ (پنجره) .scrollTop () - $ (پنجره) .height ( )) $ ("html، بدن"). animate ((scrollTop: movePos), 600);));));

ارتفاع داده شده با vh همچنین می تواند برای مرکز عنصر در صفحه استفاده شود.

یک مقاله ضروری نیست.

1 پیکسل (پیکسل)= 1/96 اینچ، اما نه در CSS. 1 پیکسل در CSS نقطه ای روی صفحه نمایش کاربر است که اندازه فیزیکی آن به وضوح دستگاه و فاصله ای که فرد از آن به سطح آن نگاه می کند (تلفن همراه یا تلویزیون) بستگی دارد. در هر واحد اندازه گیری که کد را ننویسیم، به px کاهش می یابد.

1 ام= مقدار اندازه فونت والدین. توجه داشته باشید که در چند ضلعی زیر اندازه فونت بلوک های زرد و قهوه ای متفاوت است، اما اندازه فونت یکسان است.

16px * 1 = 16px // زرد 16px * 0.5 = 8px // سبز 8px * 2 = 16px // قهوه ای

1 رم= مقدار اندازه فونت (عنصر ریشه سند).

16px * 1 = 16px // زرد 16px * 0.5 = 8px // سبز 16px * 2 = 32px // قهوه ای

1 درصد (1%)- مقدار نسبت به ارزش ویژگی تگ والد.

16px * 100% = 16px // زرد 16px * 50% = 8px // سبز 8px * 200% = 16px // قهوه ای

کاهش عرض والد، عرض عنصر را کاهش می دهد، اما فونت آن را کاهش نمی دهد.

1vw= 1% از عرض پنجره. با کاهش عرض پنجره، عرض، ارتفاع و فونت عنصر کاهش می یابد. با فشار دادن Ctrl + یا Ctrl - فونت کوچک نمی شود.

1vh= 1٪ از ارتفاع پنجره. با کاهش ارتفاع پنجره، عرض، ارتفاع و فونت عنصر کاهش می یابد. با فشار دادن Ctrl + یا Ctrl - فونت کوچک نمی شود.

1vmin= 1vw یا 1vh. یکی که کوچکتر است انتخاب می شود.

1vmax= 1vw یا 1vh. بزرگتر انتخاب می شود.

اندازه قلم: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem;

اندازه قلم: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem;

اندازه فونت: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem;

تابع کالک ()

آیا تا به حال خواسته اید پیکسل ها یا em را از درصد کم کنید؟ به عنوان مثال، به منظور. اکنون امکان پذیر است. تابع calc () به شما امکان می دهد عبارات ریاضی را پیاده سازی کنید

جمع (نویسه با فاصله در هر دو طرف از هم جدا می شود) - تفریق (نویسه با فاصله در هر دو طرف از هم جدا می شود) * ضرب / تقسیم

در اینجا یک نمونه تست دیگر است.

• 1
• 2
• 3
• 4

واحدهای اندازه گیری جدید (نسبتا) را ذکر کردم. این واحدها vw، vh، vmin و vmax هستند و بر اساس اندازه نمای مرورگر هستند. اندازه واقعی آنها با تغییر درگاه دید مرورگر تغییر می کند و این واحدها را برای طراحی های واکنش گرا ایده آل می کند. در حالی که من با استفاده از این واحدها برای تعیین اندازه فونت در پست قبلی خود مخالف بودم، آنها می توانند برای کار با عناصر طرح بندی بسیار مفید باشند.

واحدهای نما

واحدهای Viewport واحدهای نسبی هستند، به این معنی که نمی توان آنها را به طور عینی اندازه گیری کرد. اندازه آنها با اندازه نمای در مرورگر تعیین می شود. چهار واحد مربوط به viewport وجود دارد.

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

به طور خلاصه، موارد زیر را دریافت می کنید:

وقتی با عرض سروکار داریم% بهتر است و اگر با ارتفاع vh بهتر است.

عناصر صفحه کامل:%> vw

همانطور که گفتم، vw اندازه عنصر را بر اساس عرض ویوپورت تعیین می کند. با این حال، مرورگرها اندازه را بر اساس فضای نوار اسکرول محاسبه می کنند.

اگر عرض صفحه بزرگتر از عرض درگاه دید باشد، یک نوار اسکرول ظاهر می شود. با این حال، در واقعیت، عرض Viewport بزرگتر از عرض عنصر html است

Viewport> html> body

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

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

عناصر صفحه کامل: vh>%

هنگام ایجاد عناصری که باید ارتفاع صفحه را داشته باشند، بهتر است به جای درصد از vh استفاده کنید. از آنجایی که درصد یک عنصر نسبت به والد آن اندازه می‌شود، تنها زمانی می‌توانیم عنصری با ارتفاعی برابر با ارتفاع صفحه دریافت کنیم که والد آن نیز کل ارتفاع صفحه را اشغال کند. این بدان معناست که برای اینکه عنصر html را به عنوان والد تبدیل کنیم، باید عنصر را ثابت قرار دهیم، یا باید به نوعی هک متوسل شویم.

با استفاده از vh، دستیابی به این اثر بسیار آسان است:

مثال (ارتفاع: 100vh؛)

صرف نظر از نحوه تودرتو شدن عنصر مثال، می توان آن را نسبت به اندازه نمای درگاه اندازه گیری کرد. مشکل اسکرول ما را آزار نمی دهد زیرا اکثر سایت ها نوار اسکرول افقی ندارند.

در اینجا چند نمونه از نحوه استفاده از واحدهای vh آورده شده است.

تصاویر پس زمینه تمام صفحه

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

Bg (موقعیت: نسبی؛ پس‌زمینه: url ("bg.jpg") مرکز / پوشش؛ عرض: 100٪؛ ارتفاع: 100vh؛)

به همین ترتیب، می‌توانیم با دادن اندازه‌ی Viewport به هر بخش، افکت "pages" را ایجاد کنیم.

بخش (عرض: 100%؛ ارتفاع: 100vh؛)

ما می توانیم از جاوا اسکریپت برای ایجاد توهم ورق زدن صفحه استفاده کنیم.

$ ("nav"). on ("کلیک کنید"، تابع () (اگر ($ (this) .hasClass ("پایین")) (var movePos = $ (پنجره) .scrollTop () + $ (پنجره) .height ();) if ($ (this) .hasClass ("بالا")) (var movePos = $ (پنجره) .scrollTop () - $ (پنجره) .height ();) $ ("html، بدنه"). متحرک کردن ((scrollTop: movePos)، 1000))

تصویر تاشو

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

ما به کد زیر نیاز داریم

Img (عرض: خودکار؛ / * عرض خودکار برای ارتفاع متناسب * / حداکثر عرض: 100٪؛ / * از عرض عنصر اصلی تجاوز نمی کند * / حداکثر ارتفاع: 90 ولت ساعت؛ / * از ارتفاع عنصر تجاوز نمی کند. درگاه دید * / حاشیه: 2 دقیقه خودکار؛ )

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

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

در اینجا نحوه حل آنها آمده است.

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

واحدهای اندازه گیری و معنای آنها

4 نوع واحد دید در CSS وجود دارد: vh، vw، vmin و vmax.

ارتفاع نما (vh) - بر اساس ارتفاع درگاه دید. مقدار 1vh برابر با 1% از ارتفاع درگاه دید است.

عرض درگاه دید (vw) - بر اساس عرض درگاه دید. مقدار 1vw برابر است با 1% از عرض نمای.

حداقل دید درگاه (vmin) - بر اساس حداقل سمت درگاه دید. اگر ارتفاع ویوپورت کمتر از عرض باشد، مقدار 1vmin برابر با 1% ارتفاع خواهد بود. به طور مشابه، اگر عرض کمتر از ارتفاع باشد، 1vmin برابر با 1٪ از عرض دید است.

حداکثر Viewport (vmax) - بر اساس ضلع بزرگ نما. اگر ارتفاع ویوپورت بزرگتر از عرض باشد، مقدار 1vmax برابر با 1% ارتفاع نمای درگاه خواهد بود. اگر عرض ویوپورت بزرگتر از ارتفاع باشد، 1vmax برابر با 1% عرض خواهد بود.

بیایید ببینیم در موقعیت های مختلف چه ارزش هایی به دست می آوریم:

اگر ویوپورت 1200 پیکسل عرض و 1000 پیکسل بالا باشد، 10vw 120px و 10vh 100px خواهد بود. ویوپورت عریض تر از ارتفاع است، بنابراین 10vmax 120px و 10vmin 100px خواهد بود.

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

اگر پنجره مرورگر را به عرض 1000 پیکسل و ارتفاع 800 پیکسل محدود کنید، 10 ولت ساعت 80 پیکسل و 10 ولت وات 100 پیکسل می شود. به همین ترتیب 10vmax به 100px و 10vmin تبدیل به 80px می شود.

در حال حاضر، واحدهای نمایش برای شما ممکن است تفاوت چندانی با درصدها نداشته باشند، اما تفاوت زیاد است. در مورد درصد، عرض و قد فرزندان به بلوک والدین بستگی دارد. مثال:

در نسخه ی نمایشی، می توانید ببینید که چگونه عرض فرزند اول 80 درصد از عرض والدین است. عرض فرزند دوم 80 ولت وات است که پهن تر از والدینش است.

استفاده از واحدهای Viewport

این واحدها بر اساس اندازه ویوپورت هستند، بنابراین در شرایطی که عرض، ارتفاع یا اندازه عناصر باید بسته به اندازه ویوپورت تغییر کند، بسیار مفید هستند.

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

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

بیایید نگاهی به مثال HTML زیر بیندازیم: