Минимум и максимум: понятия vMin и vMax в CSS

Минимум и максимум: понятия vMin и vMax в CSS

От автора: в предыдущей статье я рассказал вам про крайне полезные единицы измерения в 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:

h1 {
  font-size: 20vmin;
  font-family: Avenir, sans-serif;
  font-weight: 900;
  text-align: center;
}

С единицами измерения vmin размер шрифта заголовка не увеличится и не уменьшится, если полностью развернутое окно браузера вдруг начнет сжиматься, так как единицы измерения реагируют на высоту. Однако если ширина станет меньше высоты, другими словами, если страница перейдет в портретную ориентацию, текст станет больше или меньше. Посмотреть можно в демо на CodePen.

Все самое важное расположено в верхней части страницы

Контент, расположенный в верхней части страницы и высотой не менее 100vh будет всегда отображаться на видимой части страницы в браузере без прокрутки, но иногда контент может располагаться и вдоль большой стороны окна браузера. Если min-height элемента задана в vmax, то контент может отображаться крупно и в браузере, ширина окна которого больше высоты:

header {
    background: #000;
    min-height: 8vmax;
}

Способ можно комбинировать с max-height, чтобы ограничить высоту элемента на слишком больших экранах.

Возможные сложности

С vmin и vmax необходимо учитывать пару вещей:

Исторически сложилось, что в Mobile Safari есть несколько багов (которые будут решены в iOS 10). У Родни Рема есть «buggyfill» для браузеров для решения этой проблемы.

IE9 использует vm для представления vmin, а также в данном браузере отсутствует поддержка vmax. В IE поддержка нормальная.

Надеюсь, вы поняли, что у vmin и vmax есть свои потрясающие способы применения. Надеюсь, вы найдете им применения в своих работах.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree