Vmin css: Относительные единицы измерения vh, vw, vmin, vmax

Viewport единицы в CSS

В этой статье вы узнаете про единицы вьюпорта в CSS и варианты их применения.

Перевод CSS Viewport Units

Viewport единицы уже существуют несколько лет и со временем я вижу рост их применения другими разработчиками. Их полезность заключается в том, что они дают нам возможность выставлять размеры гибким и динамическим образом, без прямого использования JavaScript. Также, для них легко сделать фоллбэк в случае отсутствия поддержки браузером.

В соответствии со спецификацией CSS, процентные вьюпорт единицы относительны размеру изначального блок контейнера, который сам по себе является корневым элементом страницы.

Viewport единицы это vw, vh, vmin и vmax.

Единица vw представляет собой процентное измерение ширины корневого элемента. Один vw равен 1% ширины вьюпорта.

Тут у нас есть элемент с таким CSS:

.element {
    width: 50vw;
}

Когда ширина вьюпорта равна 500px, то 50vw будут высчитаны таким образом:

width = 500*50% = 250px

Единица vh представляет собой процентное измерение высоты корневого элемента. Один vh равен 1% высоты вьюпорта.

У нас есть элемент с таким CSS:

.element {
    height: 50vh;
}

Если высота вьюпорта равна 290px, то 70vh будет высчитано следующим образом:

height = 290*70% = 202px

Вот и всё! Теперь давайте взглянем на другие единицы.

Эта единица является минимумом ширины или высоты вьюпорта. Если ширина вьюпорта больше его высоты, то значение единицы будет высчитано, основываясь на высоте.

Давайте посмотрим на пример ниже.

У нас есть мобильный телефон в лэндскейп режиме и у элемента на странице есть такая единица как vmin. В этом случае, значение будет высчитано по высоте вьюпорта, так как оно меньше ширины.

.element {
    padding-top: 10vmin;
    padding-bottom: 10vmin;
}

Вот как она будет считаться:

Как вы уже могли предположить, результат будет считаться таким образом:

padding-top = (10% of height) = 10% * 164 = 16.4px 
padding-bottom = (10% of height) = 10% * 164 = 16.4px

Это прямая противоположность vmin. Значение считается основываясь на максимальной ширине и высоте.

Давайте посмотрим на пример:

.element {
    padding-top: 10vmax;
    padding-bottom: 10vmax;
}

Результат бы был высчитан таким образом:

padding-top = (10% of width) = 10% * 350 = 35px
padding-bottom = (10% of width) = 10% * 350 = px

Они берут за основу корневой элемент страницы, в то время как проценты основаны на размере своего контейнера.

В следующих секциях мы посмотрим на некоторые примеры использования единиц viewport и на то, как их применять в ваших рабочих проектах.

Единицы вьюпорта идеальны для адаптивной типографики. Для примера, мы можем использовать следующий код для заголовка статьи:

.title {
    font-size: 5vw;
}

Размер заголовка будет увеличиваться или уменьшаться в зависимости от ширины вьюпорта. Это как будто бы мы выдали размеру шрифта 5% ширины страницы. Однако, как бы не хотелось, а надо протестировать и смотрим, что получается.

Обратите внимание, что шрифт стал очень мелким при мобильных размерах, это очень плохо в плане доступности и UX. Насколько я знаю, минимальный размер шрифта на мобильных устройствах не должен быть ниже 14px. А там у нас выходит уже ниже 10px.

Чтобы решить эту проблему, нам надо дать заголовку минимальный размер шрифта, который не может быть меньше положенной нормы. И тут CSS calc() спешит на помощь!

.title {
    font-size: calc(14px + 2vw);
}

Ещё стоит рассмотреть то, как себя будет вести размер шрифта на больших экранах, к примеру на 27” аймаках. Что будет? Ну вы уже наверное предположили. Размер шрифта бахнет аж в 95px, что само по себе уже кошмар. Чтобы предохраниться от этой ситуации мы можем использовать медиа запросы на определённых брейкпоинтах и менять размеры шрифтов.

@media (min-width: 1800px) {
    .title {
        font-size: 40px;
    }
}

Сбрасывая font-size мы можем быть уверены в том, что размер шрифта не будет слишком большим.

Иногда нам надо, чтобы секция забирала 100% высоты виюпорта. Это так называемые полноэкранные секции. Для их создания мы можем использовать вьюпорт единицу высоты.

.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Добавив height: 100vh, мы можем точно убедиться в том, высота секции будет в 100% высоту вьюпорта. Также, тут я добавил немного флексбокса, чтобы отцентровать контент вертикально и горизонтально.

На больших экранах вы могли уже обратить внимание на то, что футер не прилипает к концу страницы. Ну и это нормально. Это даже не рассматривается как плохая практика. Однако, тут у нас есть пространство для улучшений. Давайте рассмотрим следующий кейс, в котором и происходит эта ошибка.

Чтобы её решить, нам нужно отдать основному контенту высоту, равную разнице между высотой вьюпорта и суммой хедера и футера. Динамически это довольно хитрая операция, но с помощью единиц вьюпорта всё становится довольно быстро и понятно.

header,
footer {
    height: 70px;
}

main {
    height: calc(100vh - 70px - 70px);
}

Это решение не гарантирует того, что оно будет всегда работать, особенно для футера. За всю свою карьеру я никогда не использовал футер с фиксированной высотой, потому что это просто непрактично, особенно на разных размерах экранов.

Добавляя 100vh как высоту для body элемента, мы можем использовать флексы для того, чтобы основной контент занимал всё оставшееся место.

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{

main {
    flex-grow: 1;
}

С учетом этого, наша проблема решена и у нас есть прилипающий футер вне зависимости от длины контента.

Занимаясь подготовкой материала я наткнулся на эту статью и она мне реально понравилась. Так что я возьму пример использования оттуда и объясню его своим способом.

Предположим, что у нас есть портфолио для того, чтобы показать свои адаптивные работы и у нас имеется три типа устройства (мобильные, планшеты и ноутбук). В каждом устройстве есть по изображению. Суть в том, чтобы сделать этот контент 100% отзывчивым на CSS.

Используя гриды и единицы вьюпорта, мы можем сделать это адаптивным и динамическим.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Обратите внимание, что вьюпорт единицы используются в grid-* свойствах. Они также используются для border, border-radius и других свойств. Всё это приведет к флюидному дизайну.

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 5vw); 
  grid-auto-rows: 6vw;
}

.mobile { 
  position: relative;
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row: 3 / span 5;
}
 
.tablet {
  position: relative;
  z-index: 1;
  grid-column: 13 / span 7; 
  grid-row: 4 / span 4;
  border-bottom: 1vw solid #a9B9dd;
  border-right: solid 3vw #a9B9dd;
}
 
.laptop {
  position: relative;
  grid-column: 3/span 13;
  grid-row: 2 / span 8;
}

.laptop:after {
    content:"";
    position:absolute;
    bottom: -3vw;
    left: -5.5vw;
    right: -5.5vw;
    height: 3vw;
    background-color: #a9B9dd;
    border-radius: 0 0 1vw 1vw;
}
 

Видео пример

Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней.

Чтобы достигнуть такого же эффекта, мы можем использовать вьюпорт единицы и свойства позиционирования. Вот наш CSS:

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

Давайте разберем всё по полочкам и поймём как это работает.

Добавляем width: 100vw

Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.

Добавляем margin-left: -50vw

Чтобы отцентровать изображение, нам понадобится выдать отрицательный маргин с половиной ширины вьюпорта.

Добавляем left: 50%

И наконец, мы отодвинем изображение в правую сторону со значением 50% от ширины его родителя.

Ещё один интересный пример, а именно использование вьюпорт единиц для спейсинга между элементами. Его можно использовать с таким значениями как margin, top, bottom и grid-gap. Применяя его, спейсинг будет основываться на ширине вьюпорта и его высоте, что может быть крайне полезным для создания динамических шаблонов.

В случае с модалками нам надо отталкивать их с самого верха вьюпорта. Зачастую я делал это с помощью свойства top и процентов с пикселями. Однако, с единицами вьюпорта, мы можем добавить спейсинг, который может меняться, основываясь на высоте самого вьюпорта.

.modal-body {
    top: 20vh;
}

Посмотрите это видео, чтобы посмотреть на результат.

Шапка это секция, которая показывает нам общую картину на странице или сайте. Часто там есть заголовок и описание, и среди этого всего есть фиксированная высота и падинги для верха и подвала страницы. Тут нам интересны падинги.

Для примера, вот как выглядит CSS:

. page-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 800px) {
    .page-header {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

Вертикальный паддинг довольно мал на мобильных устройствах и он становится больше на больших вьюпортах. Как насчет использования единиц вьюпорта? Давайте посмотрим на это.

.page-header {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.page-header h3 {
    margin-bottom: 1.5vh;
}

Я использовал vh для паддинга в шапке и маргина под заголовком. Обратите внимание как меняется спейсинг!

Ещё один пример динамического спейсинга можно применить в сетке из нескольких элементов. Тут может быть всё: статьи, секции контента, услуги и тп. В нашем примере мы посмотрим на то, как можно использовать вьюпорт единицы для сетки из статей.

Используя их в grid-gap, мы можем получить желаемый результат. Обратите внимание, что я применял функцию calc(). Суть использования calc() в том, чтобы у нас уже был базис для вертикального и горизонтального промежутков.

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);
}

Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.

Этот пример показывает возможность работы с верхним и нижним паддингом в шапке элемента. Паддинг зачастую слишком сокращен, когда вьюпорт довольно мал. Используя vmin, мы можем иметь флюидные верхние и нижние паддинги, которые основываются на вьюпорте с маленькими размерами.

.page-header {
    padding: 10vmin 1rem;
}

Пример

Несколько лет назад я написал статью о вертикальных медиа запросах.

Сейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.

Используя вертикальные медиа запросы мы можем проверять находится ли девайс пользователя в лэндскэйп режиме. Если так, то тогда не будет смысла иметь секцию, занимающую всю высоту вьюпорта, применяя height: 100vh.

Чтобы решить эту проблему, мы можем сделать следующее.

@media (min-height: 400px) {
    .section {
        height: 100vh;
    }
}

Или мы можем использовать orientation в медиа запросах:

@media (orientation: landscape) {
    .section {
        height: 100vh;
    }
}

Мы можем использовать vh для создания адаптивных элементов, которые поддерживают актуальное состояние соотношения сторон вне зависимости от размера вьюпорта. Давайте на это посмотрим.

Нам нужно решить, какое соотношение сторон нам нужно. Для примера, 9/16.

section {
    /* 9/16 * 100 */
    height: 56.25vw;
}

Пример

Я не уверен правильно ли я назвал это, но надеюсь, что вы поймете суть следующих графических примеров.

Довольно популярный подход с верхним бордером

Вы знали, что верхний бордер один из самых используемых элементов на веб сайтах к сегодняшнему дню? В основном его цвет, это такой же как и основной цвет страницы.

Давайте сделаем изначальным значением бордера 3px. Как конвертировать это фиксированное значение в вьюпорт единицу? Вот как можно это посчитать:

vw = (Pixel Value / Viewport width) * 100

Ширина вьюпорта используется для расчета отношения между пикселями и vw единицей.

Для примера, вот как добавлен верхний бордер:

. header {
    border-top: 4px solid #8f7ebc;  
}

В моём случае ширина вьюпорта равна 1440.

vw = (4 / 1440) * 100 = 0.277

И вот такой CSS мы получим:

.header {
    border-top: 0.277vw solid #8f7ebc;  
}

Даже лучше, мы можем использовать основное значение в пикселях и единицу вьюпорта.

.header {
    border-top: calc(2px + 0.138vw) solid $color-main;
}

Для элементов секций с каунтером или иконкой, мы можем тоже применить единицы вьюпорта. Посмотрите на макет ниже:

/**
1. Используем гибкое значение для flex, width и height свойств.
2. line-height используется для центровки текста вертикально.
3. Размер шрифта.
4. Расстояние между кругом и текстом
**/
.point:before {
    flex: 0 0 calc(24px + 4vw); /* [1] */
    width: calc(24px + 4vw); /* [1] */
    height: calc(24px + 4vw); /* [1] */
    line-height: calc(24px + 4vw); /* [2] */
    font-size: calc(14px + 1vw); /* [3] */
    margin-right: calc(10px + 0. 5vw); /* [4] */
}

Пример

Я сделал инструмент, которые помогает мне в проверке высчитанного значения элементов у единиц вьюпорта. Посмотрите ниже:

Я добавил имя класса и свойство для каждого элемента и при смене размеров вьюпорта, значение будут динамически обновляться. Это куда лучше, чем использование DevTools и высчитывание каждого отдельного элемента.

Пример

Есть распространенная проблема на мобильных устройствах, которая касается скролла, даже если используется 100vh. Проблема тут в том, что адресная строка находится во вьюхе. Луис Хобрегс написал статью об этом и показал простое и легкое её решение.

.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

А теперь js:

let vh = window.innerHeight * 0.01;
document.documentElement. style.setProperty('--vh', `${vh}px`);

Применяя 100vw для того, чтобы выдать элементу полную ширину вьюпорта, всё у вас будет отлично работать на Mac OS, так как вертикальный скроллбар там спрятан по-дефолту. Как результат, ширина скроллбара добавлена полной ширине.

Однако, пользователи Windows обратят внимание на то, что появился горизонтальный скроллинг. Почему? Потому что ширина скроллбара была добавлена ширине экрана. Скажем, что вы добавили такой CSS:

.element {
    width: 100vw;
}

На Windows, высчитанная ширина .element будет равна 100vw + 8.5px, где 8.5px это ширина вертикального скроллбара.

Насколько я знаю, то пока что нет конкретного решения этой проблемы без использования JavaScript, применение которого тут я не советую. Лучше избегать 100vw и использовать альтернативу. Для примера, мы можем применить CSS Grid, чтобы элемент вышел за пределы контейнера, посмотрите на решение в этой статье.

Спасибо Крису Моргану и Килиану Валкхофу за то, что предупредили меня об этой проблеме.

Используя единицы вьюпорта довольно часто на вашем проекте, например для создание всего макета, доступность становится очень важной. Когда шаблон зумится ближе или отдаляется, элементы с единицами вьюпорат не будут увеличиваться или уменьшаться как вы ожидали. Это станет проблемой для пользователей, которые полагались на зум в браузере.

По словам Сары Суейдан, использование единиц вьюпорта для размеров шрифтов это плохая практика в плане доступности. Лучше комбинировать их с фиксированными значениями, как описано ниже:

.title {
    font-size: calc(16px + .3vw);
}

Даже лучше, мы можем использовать CSS единицы em и rem, вместо px. Таким образом у нас будет больше контроля при изменении размера шрифта.

.title {
    font-size: calc(1rem + . 3vw);
}

И это будет хорошо. Пожалуйста, убедитесь в том, что использование единиц вьюпорта подходит для того, что вы делаете и не забывайте хорошо тестировать.

Я нашёл этот полезный конвертер из px в vw, который может помочь вам в вашем проекте.

У вас есть какие-нибудь полезные инструменты? Дайте мне знать.

Это всё. У вас есть какие-нибудь комментарии и предложения? Пишите автору на shadeed9.

Полезная рассылка. Выпуск 32 — Блог HTML Academy

Знакомьтесь, у нас ещё енот. Три статьи для новичков «Форматы изображений», «Растровая и векторная графика» и «Всегда используйте <label>».

Также мы подготовили обещанные в прошлом выпуске отчёты прошедших интенсивов: «Базовый HTML и CSS» и «Базовый JavaScript».

В этот раз в рассылку попали статьи об ошибках и непопулярных свойствах в CSS, правилах адаптивных SVG и ежедневной работе с Git.

Инструменты и статьи

Common CSS mistakes (and how to fix them)
Работа над ошибками в CSS. Автор решил собрать самые распространённые ошибки и показать, как их можно исправить.

Вёрстка: отображаем пользовательский контент
Мы никогда не узнаем, что в голове пользователя, пока он не опубликует комментарий или пост. А хорошо бы. Как же верстать этот непредсказуемый пользовательский контент?

The state of HTML5 input elements
Международные проекты: проблема локализации полей ввода в HTML

MinMaxing: understanding vmin and vmax in CSS
Используем непопулярные свойства vmin и vmax для мобильной вёрстки.

The new system font stack?
Учимся подбирать и использовать системные шрифты.

@supports will change your life
Не надо далеко ходить, чтобы задать вопрос о поддержке того или иного свойства. С помощью @supports можно сделать это одним запросом к браузеру, прямо в своём CSS.

10 golden rules for responsive SVG’s
Десять правил, которые неоходимо помнить, создавая SVG-изображения масштабируемыми для всех устройств.

Gmail update: a closer look at Google’s rendering refresh
Свежее обновление Gmail с расширенной поддержкой стилей. Как все эти изменения повлияют на будущее вёрстки рассылок?

Двенадцать полезных Chrome DevTools Tips
Двенадцать полезных функций инструмента для разработчиков, о которых вы, возможно, не знали.

Ежедневная работа с Git
Подробный разбор работы с Гитом: как не сойти с ума каждый день, используя систему контроля версий.

Единицы в CSS

1- Единицы измерения (Units)

CSS предоставляет разные единицы измерения (Unit) для представления длины, некоторые из них имеют историю от Topography (топографическое измерение), например PT (Point) и PC (Pica), некоторые другие знакомые единицы, такие как CM (Centimeter), IN (Inch),…

Любая единица измерения в CSS может быть использована для любого свойства (property) связанного с длиной, размером, как CSS font-size, width, height,. .. Но есть некоторые рекомендации для вашего использования:

Примечание: Есть некоторые единицы, которые на данный момент в процессе тестирования, поэтому многие браузеры не поддерживают. Вам нужно быть осторожным при их использовании.

В основном, единицы измерения делятся на 2 вида: Единица абслютной длины и единица относительной длины.

2- Единица абсолютной длины

Единица абсолютной длины часто используется в CSS, она поможет вам настроить точный размер.

Unit	Name	Equivalent to
cm	Centimeters	1cm = (1/2. 54) of 1in
mm	Millimeters	1mm = 1/10 of 1cm
Q	Quarter-millimeters	1Q = 1/4 of 1mm
in	Inches	1in = 2.54cm
pc	Picas	1pc = 1/16 of 1in
pt	Points	1pt = 1/72 of 1in
px	Pixels	Depends on the screen resolution

В основном, все единицы измерения выше не сложно понять и не нужно много объяснений, кроме единицы Pixel, которая требует дополнительные объяснения. 

В цифровом изображении (digital imaging), Pixel (Пиксель) является аббревиатурой фразы Picture Element, это физическая точка изображения Raster (Raster Image). Raster это техника создания изображения, разделив изображение на сетки маленьких квадратов, каждый квадрат имеет опредленный цвет и является минимальной едницей для создания цифрового изображения.

Чем больше имеется в одном Inch пикселей (pixel), тем яснее изображение. Единица Pixel не имеет определенного физического значения, она зависит от плотности пикселей (pixel density), или сказать по другому зависит от разрешения экрана (screen resolution) устройства.

Пиксели очень маленькие, поэтому вам сложно обнаружить квадраты, только если вы увеличите изображение.

Текущие распространенные экраны используют разрешение 96 DPI, это значит в одном Inch имеется 96 пикселей или в 1 Centimet имеется примерно 37.79 пикселей.

Ссылка ниже поможет вам конвертировать единицы INCH, CM в соответствующие PIXEL с разными разрешениями (resolution):

Смотрите так же:

3- Относительные единицы длины

Относительные единицы длины (relative length units) распространенно используютсяя в CSS, помогает вам настроить относительный размер по отношению к определенному элементу. Например вы хотите, чтобы размер шрифта дочернего элемента была в 2 раза больше, чем размер шрифта родительского элемента, используйте единицу EM.

.child  {
   font-size: 2em;
}

Unit	Relative to (Отностительно к)
em	Размер шрифта родительского элемента.
rem	Размер шрифта коренного элемента (Элемент HTML)
ex	x-height шрифта элемента.
ch	Ширина глифа (glyph) «0» шрифта текущего элемента.
lh	line-height элемента.
vw	1% ширины у Viewport.
vh	1% высоты у Viewport.
vmin	Минимальное значение из 2-х значений: vw, vh.
vmax	Максимальное значение из 2-х значений: vw, vh.

EM является относительной единицей, она используется во всех случаях, как в определении размера шрифта, длины,.., 1em является размер шрифта родительского элемента.

Например родительский элемент имеет размер шрифта: {font-size: 15px} и текущий элемент (дочерний элемент) имеет размер шрифта {font-size: 2em}, при этом 1em = 15px, то есть 2em = 30px.

Например родительский элемент имеет размер шрифта: {font-size: 15px}, текущий элемент (дочерний элемент) имеет ширину: {width: 10em}, при этом 1em = 15px, тогда 10em = 150px. Тогда текущий элемент будет иметь ширину 150px.

Пример размра шрифта с единицей длины EM:

unit-em-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS font-size</title>
    <meta charset="UTF-8"/>
    <style>
       span {
          font-size: 2em;
       }
    </style>
</head>
<body>
    <h4>CSS font-size (Unit: em)</h4>

    Default font size (Font size of body).  <br/>

    <span>
       Span (1)
       <span>
           Span (1.1)
           <span> Span (1.1.1)</span>
       </span>
    </span>

</body>
</html>

Например, используем единицу длины EM с font-size, padding, margin, width, height,..

REM это относительная единица длины. 1REM это размер шрифта корневого элемента (Root Element) — <HTML>.

Например корневой элемент (root element) HTML имеет размер шрифта: {font-size: 15px} и текущий элемент имеет размер шрифта {font-size: 2rem}, при этом 1rem = 15px, тогда 2rem = 30px.

Например родительский элемент имеет размер шрифта: {font-size: 15px}, текущий элемент (дочерний элемент) имеет ширину: {width: 10rem}, при этом 1rem = 15px, тогда 10rem = 150px. Тогда текущий элемент будет иметь ширину 150px.

Пример размера шрифта с единицей длины REM:

unit-rem-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS font-size</title>
    <meta charset="UTF-8"/>
    <style>
       html  {
          font-size: 15px;
       }
    </style>
</head>
<body>
    <h4>CSS font-size (Unit: rem)</h4>

    Default font size (Font size of body). <br/><br/>

    <span>
       Span (1)
       <span>
           Span (1.1)
           <span> Span (1.1.1)</span>
       </span>
    </span>

</body>
</html>

Пример использования единицы длины REM с font-size, padding, margin, width, height,..

EX это относительная единица, имеет значение равное x-height шрифта текущего элемента.

EX это относительная единица. Это ширина глифа (glyph) «0» шрифта текущего элемента.

LH это относительная единица, 1LH имеет значение раное line-height текущего шрифта.

** Это единица измерения в процессе тестирования, поэтому не имеется поддерживающего браузера.

line-height определяет расстояние между базовой линией (baseline) двух строк. Базовая линия это в конце почти всех букв.

VW

VW это аббревиатура Viewport Width, 1VW имеет значение 1% ширины у Viewport.

VH

VH эо аббревиатура Viewport Height, 1VH имеет значение 1% высоты Viewport.

Пример с VW, VH:

vw-vh-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Unit: VW, VH</title>
    
    <meta charset="UTF-8"/>
     <style>
       . my-div {
          width: 50VW;
          height: 50VH;
          padding: 5px;
          background-color: #ddd;
       }
    </style>
</head>
<body>
    <h4>Unit: VW, WH</h4>

    <div class = "my-div">
         {<br>
         width:50vw; <br>
         height: 50wh;<br>
         }
    </div>

</body>
</html>

VMin

VMIN это аббревиатура Viewport Minimum, VMIN является минимальным значением среди 2-х значений VW и VH.

VMax

VMAX это аббревиатура Viewport Maximum, VMAX это максимальное значение среди 2-х значений VW и VH.

Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования точек перехода @media.

Выходим за пределы использования процентов

Традиционные единицы измерения CSS создают следующие проблемы в веб-дизайне:

• Единица измерения процент не всегда работает, как ожидается. Разработчикам приходится помнить о внешних отступах, задавая размеры элементам. Не следует использовать единицу измерения процент для задания высоты элементу body. Запись font-size: 50% задает тексту размер, равный половине его стандартного размера, а не устанавливает зависимость между размером текста и размером содержащего его элемента.
• Почти невозможно создавать фигуры идеальной формы для разных размеров окна браузера. Очень сложно добиться того, чтобы элемент был идеально квадратным и в то же время адаптивным.

Единицы измерения vw и vh в значительной мере решают все эти проблемы.

Поддерживание идеальных пропорций

С помощью единиц измерения vw и vh очень легко создать идеальные фигуры на веб-страницах. Эти единицы измерения можно использовать для задания значений размеров почти всех свойств CSS. Поэтому если нужно создать элемент, который при любых размерах окна браузера занимает 20% его ширины и при этом остается квадратным, нужно задать одинаковые значения свойствам ширины и высоты, используя единицу измерения vw:

div.twentysquare {
        background: #999;
        width: 20vw;
        height: 20vw;
}

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

Используя тот же способ, можно легко создать прямоугольник, высота которого вдвое больше его ширины при любых размерах окна браузера:

div.onetworect {
        width: 20vw; height: 40vw;
}

Задать баннеру идеальное соотношение размеров очень просто с помощью следующего кода CSS:

div. goldenrect {
        width: 100vw;
        height: 61.8vw;
        background: red;
}

Для оптимального масштабирования текста в адаптивном блоке, занимания всего предоставленного ему объема с разбивкой на строки, нужно всего лишь задать размер шрифта в единицах измерения vw.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

CSS length | TuHub

Общие сведения

Многие CSS свойства принимают значения типа <length>, например такие как font-size, margin, line-height, и т. д. Значение <length> в некоторых случаях может быть отрицательным. Некоторые свойства могут ограничивать значение до определённого диапазона. Если значение находится за пределами допустимого диапазона, то запись считается неверной и будет проигнорирована.

CSS предлагает несколько различных единиц измерения для выражения <length>. У некоторых из них есть своя история в типографии, например, пункт (point, pt) и пайка (pica, pc), а другие известны из повседневного использования, например, сантиметр (centimeter, cm) и дюйм (inch, in). Есть также единица, которая была придумана специально для CSS: это пиксель (pixel, px).

CSS также определяет набор и других единиц для измерения <length>, которые вместе с вышеупомянутыми делятся на две категории: абсолютные единицы измерения и относительные единицы измерения.

Единицы измерения

Абсолютные единицы измерения

Абсолютные длины указываются с использованием числа, после которого идёт абсолютная единица измерения.

px

Несмотря на то что это абсолютная единица измерения, px не определяется как постоянное значение, он определяется относительно устройства на котором просматривается элемент (печатная версия или экран устройства). Они определены как абсолютные в CSS 2.1, но описываются относительным образом, так как устройство может отобразить px любого размера относительно пикселя для получения правильного PPI и расстояния просмотра для конкретного устройства.

Для типичных дисплеев, 1 px в CSS равен 1 пикселю на дисплее, то есть 1 точке на экране.

mm

Один миллиметр.

cm

Один сантиметр. 1cm = 10mm = 37.8px.

in

Один дюйм. 1in = 2.54cm = 96px.

pt

Один пункт. Равен 1/72 дюйма. Пункт является наиболее распространённой физической единицей измерения для определения размера шрифта за пределами CSS, поэтому имеет смысл использовать его в стилях для печати.

pc

Одна пайка. Равна 12 пунктам.

Относительные единицы измерения

Относительные длины указываются с помощью числа, после которого идёт относительная единица измерения. Относительные единицы измерения указывают длину относительно другой длины. Таблицы стилей, которые используют относительные единицы измерения, могут легко масштабироваться из одной среды вывода в другую.

em

Относительная единица em указывает длину относительно размера шрифта элемента. Если единица измерения используется для настройки свойства font-size элемента, то в результате размер шрифта будет относительным к унаследованному значению.

1em равен значению свойства font-size элемента на котором используется единица измерения. Если размер шрифта изменяется, то и 1em будет менять своё значение в соответствии с размером шрифта.

Например, правило:

h2 { line-height: 1.4em; }

означает, что высота строки элементов h2 будет на 40% больше чем размер шрифта элементов h2. С другой стороны:

h2 { font-size: 1.4em; }

означает, что размер шрифта элементов h2 будет на 40% больше чем наследуемый размер шрифта элементами h2.

Единицы измерения em обычно используются для создания масштабируемых макетов, где текст и свойства элемента необходимо масштабировать по мере изменения размера шрифта, чтобы поддерживать читаемость. Обычно с помощью em устанавливают значения свойств line-height, padding и margin, которые играют важную роль в поддержке и балансе вертикального ритма на странице.

ex

Единица измерения ex основана на высоте символа x первого доступного из используемых шрифтов. ex определён даже для шрифтов в которых нет символа «x». Размер x либо указан в свойствах шрифта, которые высчитываются браузером, либо установлен в значении, которое в большинстве случаев равно 0.5em.

В следующем примере, высота строки текста устанавливается в значение 300% от высоты символа x используемого шрифта.

p {
  font-family: "Roboto", sans-serif;
  line-height: 3ex;
}

ch

Единица измерения ch основана на ширине символа 0 (ноль) используемого шрифта.

В следующем примере, значение отступа текста от контейнера устанавливается в значение в  10 раз превышающие ширину символа 0 используемого шрифта.

.container {
  margin: 20ch;
}

rem

Относительная единица измерения rem указывает размер относительно размера шрифта корневого элемента (html элемента). Когда свойство font-size указано у самого корневого элемента, rem ссылается на начальное значение свойства.

Единица измерения rem полезна в адаптивном дизайне, когда она упрощает масштабирование макета просто уменьшая размер шрифта корневого элемента.

В следующем примере,  размер шрифта всех элементов h2 устанавливается в значение на 250% превышающее размер шрифта корневого элемента. Размер шрифта корневого элемента установлен в 100%, а это означает что он получит размер по умолчанию установленный в браузере, обычно это 16px.

html {
  font-size: 100%; /* по умолчанию начальное значение размера шрифта */
}

h2 {
  font-size: 2.5rem; /* 2.5 * 16 = 40px */
}

Процентные единицы измерения (от области просмотра)

vh

Единица измерения vh равна 1/100 от высоты области просмотра. Это тоже самое если мы скажем, что 1vh равен 1% от высоты области просмотра.

Например, следующее правило установит размер шрифта у элементов h2 в 150% от размера шрифта элемента в котором он находится:

h2 {
  font-size: 150%;
}
                            

А следующее правило установит размер шрифта у элементов h2 в 10% от высоты области просмотра. То есть если высота области просмотра равна 200 миллиметров, например, то размер шрифта будет установлен в (10 * 200) / 100 = 20 миллиметров.

h2 {
  font-size: 10vh;
}

vw

Единица измерения vw равна 1/100 от ширины области просмотра. Это тоже самое если мы скажем, что 1vw равен 1% от ширины области просмотра. Это тоже самое что и единица измерения vh (см. выше), но основывается на ширине области просмотра вместо высоты.

Например, следующее правило установит размер шрифта у элементов h2 в 150% от размера шрифта элемента в котором он находится:

h2 {
    font-size: 150%;
}
                            

А следующее правило установит размер шрифта у элементов h2 в 8% от ширины области просмотра. То есть если ширина области просмотра равна 200 миллиметров, например, то размер шрифта будет установлен в (8 * 200) / 100 = 16 миллиметров.

h2 {
    font-size: 8vw;
}

vmin

Значение единицы измерения vmin равно минимальному значению из vh и vw. То есть, она принимает значение того чьё значение меньше. Таким образом 1vmin равен 1% от наименьшей стороны области просмотра.

Например, следующее правило установит размер шрифта у элементов h2 в 10% от размера наименьшей стороны области просмотра:

h2 {
  font-size: 10vmin;
}

vmax

Значение единицы измерения vmax равно максимальному значению из vh и vw. То есть, она принимает значение того чьё значение больше. Таким образом 1vmin равен 1% от наибольшей стороны области просмотра.

Например, следующее правило установит размер шрифта у элементов h2 в 10% от размера наибольшей стороны области просмотра:

h2 {
  font-size: 10vmax;
}

Поддержка браузерами

Тип данных <length> поддерживается всеми основными браузерами: Chrome, Firefox, Safari, Opera, IE, и на Android и на iOS. =»side-«] ol li p.game a { color: #000000; font: bold .7vw/1 tungsten, sans-serif; height: auto; width: auto; padding: 0; box-shadow: 0; }

Я пробовал использовать vmin, но это не помогает, поскольку высота окна почти всегда меньше ширины. Можно ли использовать и vw, и vh, чтобы окно подстраивалось под изменение ширины и высоты?

1

It’s Blobby Time 5 Авг 2017 в 01:08

2 ответа

Лучший ответ

Да, в зависимости от специфики вашего варианта использования. CSS позволяет использовать медиа-запросы aspect-ratio. Это может позволить вам иметь один размер vmin или vw / vh для различных соотношений сторон. Примерный пример, основанный на вашем:

html {
  color: #000000;
  font: bold 7vw tungsten, sans-serif;
  height: auto;
  width: auto;
  padding: 0;
  box-shadow: 0;
  font-size: 20vmin;
}

@media (min-aspect-ratio: 3/1) {
  html {
    color: #00a;
    font-size: 14vmin;
  }
}

Это должно позволить вам решить вашу проблему с соотношением сторон: «Я пробовал использовать vmin, но это не помогает, так как высота окна почти всегда меньше ширины».

В зависимости от вашего дизайна, использование vw, когда экран широкий, и vh, когда экран более высокий, может быть лучше, чем использование vmin, показанного выше.

3

Hans 4 Авг 2017 в 22:28

Может быть, вы можете увидеть свойство word-wrap: break-word?

В противном случае вы можете увидеть:

@media all and (orientation: landscape) { /* HERE YOUR CODE */ }

0

KolaCaine 4 Авг 2017 в 22:43

Понимание vMin и vMax в CSS

Я рассмотрел очень полезные блоки CSS vw и vh в предыдущей статье, но соответствующие блоки vmin и vmax гораздо менее известны и, как правило, плохо изучены. Это прискорбно, поскольку у модулей есть несколько действительно новых вариантов использования в веб-разработке.

Как я обсуждал ранее, 1vh равно 1% от высоты текущего окна просмотра (т. Е. Открытого окна браузера), а 1vw составляет 1% от ширины текущего окна просмотра. vmin и vmax используют те же единицы измерения, , но в соответствии с определенными правилами:

1. vmin использует отношение наименьшей стороны . То есть, если высота окна браузера на меньше , чем его ширина , 1vmin будет эквивалентно 1vh . Если ширина браузера меньше, чем высота , 1vmin равно 1vw .
2. vmax — это напротив : он использует самую большую сторону . Таким образом, 1vmax эквивалентно 1vw , если область просмотра шире, чем высота; если размер браузера больше, чем ширина, 1vmax будет эквивалентно 1vh .

Для чего они используются?

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

Как держать текст героя под контролем

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

Одно из решений — применить «зажимы» запроса @media для установки минимального и максимального размеров шрифта, усложняя ваш CSS.Альтернативой является установка заголовка font-size в vmin :

  h2 {
  размер шрифта: 20vmin;
  семейство шрифтов: Avenir, без засечек;
  font-weight: 900;
  выравнивание текста: центр;
}  

Измерено за vmin , размер текста заголовка не станет больше или меньше в полностью развернутом браузере, который сужается, поскольку единица измерения зависит от высоты области просмотра. Но если область просмотра становится уже , чем шириной — другими словами, если страница переходит в портретную ориентацию — текст будет увеличиваться или уменьшаться, как показано в соответствующей демонстрации CodePen.

Сохранение деталей над складкой

Элемент, начинающийся в верхней части страницы и имеющий высоту менее 100vh , всегда будет отображаться «выше сгиба» (то есть всегда будет оставаться выше самого нижнего края окна области просмотра), но он также может кажутся излишне большими в некоторых соотношениях сторон. Если вместо минимальная высота элемента измеряется в vmax , он может казаться достаточно большим при широком размере окна и относительно тонким в узких окнах просмотра:

  заголовок {
    фон: # 000;
    мин-высота: 8vmax;
}  

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

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

В отношении vmin и vmax следует помнить о нескольких вещах:

1. Поддержка в Mobile Safari исторически имела несколько ошибок (мы надеемся, что они будут исправлены и исправлены в предстоящем выпуске iOS 10). У Родни Рема есть исправление «buggyfill» для браузера, которое устраняет проблемы.
2. IE9 использует vm для представления vmin и не поддерживает vmax . Поддержка IE 10 и выше является стандартной.

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

Фотография Ричарда Фрейзера, используемая по лицензии Creative Commons

Нравится эта работа? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше.
Ознакомьтесь с демонстрацией CodePen для этой статьи по адресу https://codepen.io/dudleystorey/pen/ALWrXZ

vw, vh, vmin и vmax

Введение

Уровень 3 модуля значений и единиц CSS определяет весь хост новых единиц, которые могут использоваться в различных контекстах, например, секунды и миллисекунды, градусы и радианы, а также бэр для определения размеров относительно размера шрифта в корневом элементе.Один тип единиц, который не так широко обсуждался, — это единицы просмотра, для определения размеров объектов относительно размера области просмотра, блестящее предложение для адаптивного дизайна. В настоящее время они поддерживаются разумным количеством браузеров (Opera 15, Firefox, Chrome, Blackberry 10, IE10, iOS) и открывают множество интересных новых возможностей. Давайте изучим.

Синтаксис единиц просмотра

Вкратце, доступные новые единицы следующие:

• 1vw : 1% ширины области просмотра
• 1vh : 1% высоты окна просмотра
• 1vmin : 1vw или 1vh , независимо от того, что меньше
• 1vmax : 1vw или 1vh , независимо от максимального размера

Обратите внимание, что IE9 поддерживает старый синтаксис для vmin — vm , но не для шрифта размер .Браузеры на основе Webkit, которые поддерживают это, делают это, но не динамически — обновите окно браузера, если вы не видите изменений при изменении размера области просмотра.

Я создал простую демонстрацию области просмотра, которая включает в себя основной заголовок, фиктивное меню навигации и простую статью содержимого, разделенную на столбцы с использованием ширины столбца из модуля CSS Multi-column Layout (рисунок 1).

  артикул {
-webkit-column-width: 40rem;
-moz-column-width: 40rem;
ширина столбца: 40 бэр;
}

article p {
-webkit-break-inside: избежать столбца;
-moz-break-inside: избежать-столбца;
взлом внутри: избежать столбца;
}

article p: first-child {
margin-top: 0;
}
  

Если вы загрузите это в поддерживающий браузер и попытаетесь настроить ширину области просмотра, вы увидите, что размеры текста в главном заголовке и меню навигации изменяются соответствующим образом, чтобы они соответствовали дизайну (рис. 2)! Это очень круто, и работает, потому что они имеют размер относительно ширины области просмотра — когда она изменяется, они меняются.

  h2 {
размер шрифта: 6vw;
}

nav li a {
размер шрифта: 1.5vw;
}
  

  h2 {
размер шрифта: 100 пикселей;
font-size: 10rem;
размер шрифта: 6vw;
}
  

 



    
    <стиль>
        .clsP1 {
            размер шрифта: 5vh;
        }
        .clsP2 {
            размер шрифта: 5vw;
        }
        .clsP3 {
            размер шрифта: 5vmax;
        }
        .clsP4 {
            размер шрифта: 5vmin;
        }
    


   
 Высота области просмотра (5vh) применена 
    
 Применена ширина области просмотра (5vw) 
    
 Viewport Max (5vmax) - применяется vh / vw 
    
 Мин. области просмотра (5vmin) - применены vh / vw 
 

  

 section {
 width: 100vmin; // Ширина контейнера 
 background-color: # ff5442; // Dapper red 
} 

  #elem {
    высота: 100%;
}
  

  #elem {
    высота: 100vh;
}
  

  #parent {
    ширина: 400 пикселей;
}
#ребенок{
    / * Это равно 100% ширины родительского элемента, а не всей страницы.* /
    ширина: 100%;
}
  

  #parent {
    ширина: 400 пикселей;
}
#ребенок{
    / * Это равно 100% страницы, независимо от родительского размера. * /
    ширина: 100ввт;
}
  

  #rectangle {
    ширина: 60вв;
    высота: 60vh;
    маржа: 20вх авто;
}
  

 .column-2 {
    плыть налево;
    ширина: 50вв;
}
.column-4 {
    плыть налево;
    ширина: 25vw;
}
.column-8 {
    плыть налево;
    ширина: 12,5вв;
}
  

 class = "vw25" 

 class = "vw25" 

 class = "vw25" 

 class = "vw25" 

 class = "vwfs3 vhmt7 vhmb3" 

 class = "vwfs3 vhmt7 vhmb3" 

 class = "vwfs3 vhmt7 vhmb3" 

 class = "vwfs3 vhmt7 vhmb3" 

 class = "vwfs3 vhmt7 vhmb3"