От автора: в предыдущей статье я рассказал вам про крайне полезные единицы измерения в CSS — vw и vh. Однако есть и менее известные единицы измерения, vmin и vmax, которые плохо кто понимает. Меня это расстраивает, так как у данных единиц есть по-настоящему новые способы применения в веб-разработке.
Как я говорил в предыдущей статье, 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.
Зачем они нужны?
Единицы измерения vmin и vmax – отличная замена или дополнение к CSS медиа запросам по ориентации экрана (@media screen and (orientation : portrait) или @media screen and (orientation : landscape)), так как они моментально ощущают изменение соотношения сторон окна браузера.
Полный контроль текста в широкоформатных баннерах
В предыдущей статье я продемонстрировал, как использовать единицы измерения vw на заголовках. Однако на огромных или маленьких экранах такой текст быстро выходит из-под контроля:
Текст с единицами измерения vw становится слишком маленьким на экранах мобильных устройств, а на больших мониторах – слишком большим.
Один из способов решения проблемы – поставить рамки из медиа запросов и задать минимальный и максимально возможный размер шрифта. Но такой подход усложнит CSS. Также можно задать font-size в единицах измерения vmin:
1 2 3 4 5 6 |
h1 { font-size: 20vmin; font-family: Avenir, sans-serif; font-weight: 900; text-align: center; } |
С единицами измерения vmin размер шрифта заголовка не увеличится и не уменьшится, если полностью развернутое окно браузера вдруг начнет сжиматься, так как единицы измерения реагируют на высоту. Однако если ширина станет меньше высоты, другими словами, если страница перейдет в портретную ориентацию, текст станет больше или меньше. Посмотреть можно в демо на CodePen.
Все самое важное расположено в верхней части страницы
Контент, расположенный в верхней части страницы и высотой не менее 100vh будет всегда отображаться на видимой части страницы в браузере без прокрутки, но иногда контент может располагаться и вдоль большой стороны окна браузера. Если min-height элемента задана в vmax, то контент может отображаться крупно и в браузере, ширина окна которого больше высоты:
1 2 3 4 |
header { background: #000; min-height: 8vmax; } |
Способ можно комбинировать с max-height, чтобы ограничить высоту элемента на слишком больших экранах.
Возможные сложности
С vmin и vmax необходимо учитывать пару вещей:
Исторически сложилось, что в Mobile Safari есть несколько багов (которые будут решены в iOS 10). У Родни Рема есть «buggyfill» для браузеров для решения этой проблемы.
IE9 использует vm для представления vmin, а также в данном браузере отсутствует поддержка vmax. В IE поддержка нормальная.
Надеюсь, вы поняли, что у vmin и vmax есть свои потрясающие способы применения. Надеюсь, вы найдете им применения в своих работах.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Комментарии (1)