Минимални и максимални концепции за vMin и vMax в CSS

Както казах в предишната статия, 1 vh е равно на 1% от текущата височина на екрана (т.е. височината на отворения прозорец на браузъра), а 1 vw е равно на 1% от текущата ширина на прозореца. Единиците vmin и vmax работят на същия принцип, но с определени правила:

Vmin използва размера на по-малката страна. Тоест, ако височината на прозореца на браузъра е по-малка от ширината, 1 vmin ще бъде равно на 1 vh. Ако ширината на браузъра е по-малка от височината му, 1 vmin се равнява на 1 vw.

Vmax използва голямата страна. Ако ширината на браузъра е по-голяма от височината му, 1 vmax е равно на 1 vw. Ако височината на браузъра е по-голяма от ширината, 1 vmax е равно на 1 vh.

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курса и научете как да създавате модерни уебсайтове в HTML5 и CSS3

За какво са нужни?

Единиците vmin и vmax са чудесен заместител или допълнение към CSS медийни заявки за ориентация на екрана (@media screen и (ориентация: портрет) или @media screen и (ориентация: пейзаж)), тъй като те незабавно усещат промяната в съотношението на прозореца на браузъра.

Контрол на пълен текст в широкоекранни банери

В предишна статия демонстрирах как да използвам единици vw върху заглавки. Въпреки това, на големи или малки екрани текст като този бързо излиза извън контрол:

Текстът с единици vw става твърде малък на мобилни екрани и твърде голям на големи монитори.

Един от начините за решаване на проблема е да поставите рамки от медийни заявки и да зададете минималните и максималните възможни размери на шрифта. Но този подход ще усложни CSS. Можете също да зададете размер на шрифта във vmin единици:

---