Небольшой пример использования `vmin`

Автор: Chris Coyier    Источник: css-tricks.com
14.03.2017
468
0
img

Примеры единиц viewport’a: 10vw (10% от ширины viewport’a) или 2vh (2% от высоты viewport’a). Иногда эти единицы очень полезны, так как зависят только от размеров viewport’a. Никакого каскада и влияния родительских элементов.

Vmin – меньшая сторона viewport’a, а vmax – большая сторона. Эти значения могут быть использованы там же, где и px, em, % и тд.

Давайте рассмотрим небольшой шаблон, использующий vmin.

Если мы установим padding для блока header таким образом:

header {
  padding: 10vmin 1rem;
}

Мы получим фиксированный padding (1rem) по бокам, текст, размещенный внутри, никогда не будет касаться краев. Так же мы получим блок, который будет сам менять свои размеры в соответствии с размерами экрана.

 

Размеры, основанные на меньшем из двух габаритных размеров окна, выглядят более правильно, чем те, что основаны только на ширине и высоте.

Ссылка на демо.

ПОХОЖИЕ СТАТЬИ: