Содержание

Viewport единицы в CSS

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

Перевод CSS Viewport Units

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

Интро

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

Viewport единицы это vwvhvmin и vmax.

Viewport ширина

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

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

.element {
    width: 50vw;
}

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

width = 500*50% = 250px

Viewport высота

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

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

.element {
    height: 50vh;
}

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

height = 290*70% = 202px

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

Vmin

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

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

У нас есть мобильный телефон в лэндскейп режиме и у элемента на странице есть такая единица как 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

Vmax

Это прямая противоположность 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 единицы отличаются от процентов?

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

Примеры использования viewport единиц

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

Размер шрифта

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

.title {
    font-size: 5vw;
}

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

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

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

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

У функции calc() будет основное значение и оно добавит к нему 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% высоту вьюпорта. Также, тут я добавил немного флексбокса, чтобы отцентровать контент вертикально и горизонтально.

Прилипающий футер

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

Давайте рассмотрим следующий кейс, в котором и происходит эта ошибка.

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

Первое решение: calc и единицы вьюпорта

Если высота хедера и футера фиксированны, то их можно совместить с помощью функции calc():

header,
footer {
    height: 70px;
}

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

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

Второе решение: Flexbox и вьюпорт единицы (рекомендуемое)

Добавляя 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-* свойствах. Они также используются для borderborder-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% от ширины его родителя.

Вертикальный и горизонтальный спейсинг

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

Его можно использовать с таким значениями как margintopbottom и 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);
}

Vmin и Vmax — примеры использования

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

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

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

Пример

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

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

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

Секции на всю высоту экрана в Landscape режиме

Используя вертикальные медиа запросы мы можем проверять находится ли девайс пользователя в лэндскэйп режиме. Если так, то тогда не будет смысла иметь секцию, занимающую всю высоту вьюпорта, применяя 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] */
}

Пример

Viewport Units Watcher

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

Я добавил имя класса и свойство для каждого элемента и при смене размеров вьюпорта, значение будут динамически обновляться. Это куда лучше, чем использование 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 как антипаттерн

Применяя 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,. .. Но есть некоторые рекомендации для вашего использования:


Rec­om­mended
(Рекомендуется)
Oc­ca­sional use
(Для постоянного использования)
Not rec­om­mended
(Не рекомендуется)
Screen
(Экран)
em, px, %expt, cm, mm, in, pc
Print
(Печать)
em, cm, mm, in, pt, pc, %px, ex

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

В основном, единицы измерения делятся на 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;
}
UnitRelative to
(Отностительно к)
emРазмер шрифта родительского элемента.
remРазмер шрифта коренного элемента (Элемент HTML)
exx-height шрифта элемента.
chШирина глифа (glyph) «0» шрифта текущего элемента.
lhline-height элемента.
vw1% ширины у Viewport.
vh1% высоты у 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)! Это очень круто, и работает, потому что они имеют размер относительно ширины области просмотра — когда она изменяется, они меняются.

Рисунок 1: Простой макет веб-страницы с основным заголовком, меню навигации и тремя столбцами основного текста с использованием блока `vw`. Рисунок 2: Когда ширина области просмотра уменьшается, элементы заголовка и навигации соответственно уменьшают размер текста.

Для этого используется следующий код:

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

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

Это позволяет вам изначально реализовать адаптивные заголовки аналогично отличному плагину Fittext jQuery от Paravel.js (хотя и с меньшей гибкостью; FitText автоматически расширяет заголовки, чтобы они заполняли свои контейнеры, поэтому они все равно будут работать, если количество текста в заголовках изменится). Но подумайте об этом — здесь я все упростил, но вы можете изменить размер всех своих функций пользовательского интерфейса с помощью этих единиц, что приведет к окончательной гибкой компоновке, которая всегда остается относительно размера области просмотра.

По данным caniuse.com, на момент написания статьи поддержка единиц просмотра в современных браузерах составляла около 55%.Поэтому вам следует хорошо подумать, используя их в своих производственных проектах. Вы можете использовать fittext.js, рассмотреть возможность использования Polyfill (vminpoly работает нормально, но нуждается в улучшении) или использовать запасной вариант вроде этого (учитывая, что старый IE также не поддерживает rem):

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

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

Резюме

Вот и все! Надеюсь, вы думаете, что единицы просмотра такие же крутые, как и я, и я с нетерпением жду возможности увидеть, что вы с ними создаете. Что ж, когда я говорю, что единицы просмотра — это круто — я в значительной степени просто говорю о vw и vh ; Я не могу придумать конкретный вариант использования для vmin или vmax . Если он у вас есть, я буду рад получить известие от вас.

Относительная единица (vh, vw, vmax, vmin)

Относительные единицы работают на основе длины родительского элемента.Применяемый элемент относительных единиц регулирует длину в зависимости от длины его родительского элемента. Родительский элемент может быть другим элементом или браузером.

vh — присвоить элементу высоту области просмотра 1%.

vw — присвоить элементу ширину области просмотра 1%.

vmax — присвоить элементу 1% большей единицы vh или vw.

vmin — присвоить элементу 1% меньшей единицы vh или vw.

Что такое область просмотра?

Окно просмотра обозначает видимую область размера окна браузера. При изменении размера окна браузера размер области просмотра также изменяется.

Например, если ширина одного окна просмотра составляет 640 пикселей, а высота — 480 пикселей, тогда

1vw = 1 * (640/100) = 6.4px

1vh = 1 * (480/100) = 4.8px

1vmax = 1 * (640/100) = 6.4 пикселей

1vmin = 1 * (480/100) = 4.8 пикселей

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

Пример. Примените единицы измерения vh, vw, vmax и vmin (v = viewport) к элементам HTML.

 



     Единицы окна просмотра CSS 
    <стиль>
        .clsP1 {
            размер шрифта: 5vh;
        }
        .clsP2 {
            размер шрифта: 5vw;
        }
        .clsP3 {
            размер шрифта: 5vmax;
        }
        .clsP4 {
            размер шрифта: 5vmin;
        }
    


   

Высота области просмотра (5vh) применена

Применена ширина области просмотра (5vw)

Viewport Max (5vmax) - применяется vh / vw

Мин. области просмотра (5vmin) - применены vh / vw

В приведенном выше примере

  • 5vh (высота области просмотра) применяется к первому элементу P.
  • 5vw (ширина области просмотра) применяется ко второму элементу P.
  • 5vmax (больший размер vw / vh) применяется к третьему элементу P.
  • 5vmin (меньший размер vw / vh) применяется к четвертому элементу P.

Связанные темы:


saabi / vminpoly: полифилл для CSS-модулей vw, vh и vmin, а теперь несколько медиа-запросов для загрузки.Работает в IE5.5 и Opera Mini

Полифилл для модулей CSS vw, vh и vmin.

Простая онлайн-демонстрация прямо здесь. Более сложная адаптивная демонстрация, демонстрирующая блоки vw / vh / vmin вместе с медиа-запросами , работающими вплоть до IE5.5 на настольных компьютерах и Opera Mini на мобильных устройствах !! (В Opera Mini браузер должен быть обновлен после изменения ориентации телефона, поскольку, похоже, он не запускает событие изменения размера окна)

Это работающее доказательство концепции прямо сейчас.В коде нужно многое почистить.

Поскольку большинство браузеров игнорируют правила, которые они не понимают, код должен загружать и анализировать исходный код CSS. Он делает это с помощью парсера CSS JavaScript. Как только это будет сделано, он фильтрует сгенерированное дерево, оставляя только правила, в которых используются единицы измерения «vh», «vw» и «vmin». Во время изменения размера окна он генерирует CSS-код для эквивалентов «px» и добавляет его в элемент «style» в конце элемента «head». Сгенерированный код учитывает медиа-запросы.

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

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

Банкноты

  • Он отлично работает в IE5.5 +, Firefox, Opera и даже Opera Mini, который не поддерживает ни один из модулей или медиа-запросы. Chrome, Safari и бета-версия Firefox не нуждаются в этом.
  • Хорошо… Chrome и Safari действительно могут извлечь из этого выгоду, поскольку они неправильно обрабатывают размер шрифта при изменении размера окна.

TODO:

  • IE9 и IE10 поддерживают vw, vh и vm, поэтому код должен преобразовывать только единицы vmin в vm
  • В данный момент анализируются только связанные таблицы стилей, но также очень легко анализировать элементы «стиля».
  • Также рекурсивно анализируйте правила @import.
  • Добавьте еще несколько примеров того, чего можно достичь.

Короче говоря, единственный браузер с полной нативной поддержкой на данный момент — это Firefox beta (Aurora).Остальные сразу же выиграют от этого полифила, даже без столь необходимой полировки кода.

Последние изменения:

  • После исправления некоторых ошибок он наконец работает до IE5.5 на настольном ПК и Opera Mini на мобильном !!
  • Также я удалил зависимость от jQuery.
  • Теперь правильно меняет размер сразу после загрузки страницы.
  • Поддержка медиа-запросов !! (элементарно, но посмотрите новую демонстрацию!)
  • Сейчас медиа-запросы применяются только к правилам с единицами vw, vh / vmin.Остальные правила пока применяться не будут. Еще не все …

Отзывчивый тип и многое другое только с CSS | автор: Райан Аллен

Присылайте мне фотографии вашего любимого космического корабля в Twitter, linkedin или dribble.

Недавно я работал над проектом для клиента, который требовал масштабирования заголовков в соответствии с размером экрана пользователя в стилистических целях. Я знал, что мой обычный метод установки единиц измерения в rem не будет работать, поскольку он зависит от размера шрифта корневого элемента html, а не от размера экрана пользователя.

После поиска в Интернете я нашел решение, которое искал, в виде чего-то под названием Viewport-Percentage Lengths.

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

В конце концов я дошел до статьи MDN, в которой обсуждались типы данных, в которых рассматривались относительные размеры (rem и em), а дальше по странице я заметил что-то, называемое длиной в процентах от окна просмотра . Это именно то, что я искал, просто не знал, как это называется!

На самом деле все очень просто. Одна единица равна 1% ширины окна просмотра vw или высоты vh. Вы также можете установить минимальное и максимальное значения с помощью vmin и vmax.

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

Если ширина области просмотра 100 мм, то 5vw == 5 мм .
В случае font-size: 5vw; одна буква принимает этот размер, поэтому в этом примере поле em составляет 5% ширины экрана (ширина 5 мм).

vmin и vmax устанавливаются следующим образом:

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

В приведенном выше примере контейнер раздела заполняет 100% ширины экрана только в том случае, если экран находится в книжной ориентации (выше, чем ширина).

Вот пример масштабирования размера шрифта с размером экрана без установленных точек останова. ( Прошу прощения, но среда, похоже, не позволяет мне встраивать демонстрации )

Вот забавный пример, который я сделал, показывая страницу документа с парижско-синим фоном, на котором контейнер раздела заполняет 90vm (90%) ширина области просмотра и высота с помощью простого медиа-запроса ориентации.

Эти единицы можно использовать не только для размера шрифта, но и для чего угодно. Вместо установки ширины контейнера: 90%; вы можете установить ширину: 90vw; как в приведенном выше примере.

Поддерживается большинством основных браузеров, но не всеми. Internet Explorer не поддерживает vmax, и у него есть некоторые проблемы на мобильных устройствах. Если вы успешно используете этот метод в каком-либо из своих проектов, дайте мне знать, что вы думаете.

CSS 中 如何 使用 视窗 单位 _vw, vh, vmin, vmax 教程 _W3cplus

视窗 (Viewport) 单位 已经 有了 好 几年 了 但 我们 并 没有 看到 它 经常 使用。 它们 现在 正在 被 所有主流 浏览 器 所 支持 并 提供 独特 的 功能 使它 在 特定 情况 下 非常 有用 , 特别 涉及 响应 式 的 设计。

视窗 (Viewport) 单位

(Viewport) 你 的 浏览 器 实际 显示 内容 的 区域 —— 换句话说 是 你 的 不 栏 和 按钮 的 网页 浏览 器。 是 器。 是 vw , vh , 9000 903 vmin 和 vmax 。 它们 都 代表 了 浏览 器 (视窗 (Viewport)) 的 比例 和 窗口 大小 调整 产生 的 规模 改变。

比方 说 我们 有 一个 1000px (宽) 和 800px (高) 的 视窗 (Viewport)

  • vw —— 代表 视窗 (Viewport) 的 宽度 为 1% , 在 我们 的 例子 里 50vw = 500px
  • vh —— 窗口 高度 的 百分比 50vh = 400px
  • vmin ——vmin 的 值 是 当前 vw vh 中 较小 的 值。 在 我们 的 例子 里 因为 是 横向 所以 50vim = 400px
  • vmax —— 大 尺寸 的 百分比。 50vmax = 500px

你 可以 在 任何 一个 可以 使用 像素 值 的 地方 使用 它们 , 比如 width , height , margin , font-size 等等 大小 的 调整 浏览 设备来 重新 计算 这些 值。

占用 页面 的 整个 高度

每 一个 前端 开发 人员 都 致力于 这 件事。 你 的 第一 直觉 是 这样 做 :

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

除非 我们 为 html body 添加 100% 的 只是 这样 还是 不行 的 , 设计 部分变得 相当 容易 了 , 只 需要 为 高度 设置 100vh , 那 它将 永远 都是 你 窗口 的 高度。

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

这 似乎 是 一个 完美 的 全屏 图像 的 英雄 , 而且 看起来 非常 时尚。

子 元素 大小 根据 浏览 器 改变 而 不是 元素

某些 想要 的 是 子 元素 的 大小 相 对于 窗口 改变 不是 元素。 的 的 , 按照 前面 的 例子 , 这样 是 不行

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

如果 我们 用 vw 来 设置 子 元素 , 那么 它 会 简单 的 溢出 并 的 全 宽 :

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

响应 字体 大小

(Viewport) 单位 也 可以 在 文本 中 使用 呢! 在 这个 例子 中 我们 使用 vw 设置 体 大小 来 创建 的 的 CSS 响应 式 文字。 Fittext!

响应 垂直 居中

通过 设置 元素 的 width , height margin 的 视窗 (Viewport) 单位 , 你 可以 不 使用 任何 其它 技巧 来 居中。

有 一个 高度 为 60vh 上下 外边 距 为 20vh 的 矩形 , 它们 加起来 是 100vh ( 60 + 2 * 20 ) , 使它 即便 调整 大

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

等 宽 列

可以 使用 视窗 (Viewport) 单位 来 设置 响应 式 网 格。 它们 的 行为 类似于 百分比 但 相 对于 视窗 (Viewport) 的 小。 所以 你 可以 将 它们 放在 一个 比 宽 的 父 元素 里 ,但 它 仍然 有 网格 来 保持 其 应有 的 宽度。 这样 来 创建 全屏 滑块 可谓 得心应手。

这项 技术 需要 元素 用 float: left 来 对齐 彼此 相邻 的 元素 :

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

总结

视窗 (область просмотра) 单位 有 它 的 用途 而且 尝试。 它们 易于 理解 , 而且 在 对于 CSS 更加 的 解决 方案 的 技术 有 非常 大 的 帮助。

文 根据 @Danny Markov 的 《Упростите свои таблицы стилей с помощью волшебных модулей просмотра CSS》 所 译 , 整个 译文 带有 我们 自己 的 理解 与 如果 译 得 不好 或 指点。转载 此 译文 , 需 注明 英文 出处 : http: //tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/。

大连 民族 大学 在 , 一个 向往 文艺 的 逗 比。 , 各种 新兴 事物 有 的 , 享受 通过 自己 的 努力。 努力 ing ~ 成长 ing ~

如需 转载 , 烦请 注明 出处 http: // www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html

— легкая альтернатива глючным модулям CSS vh / vw / vmin / vmax.

vUnit — легкая альтернатива глючным CSS-модулям vh / vw / vmin / vmax.

 class = "vwfs2 vhmt4 vhmb4 vw80" 
vUnit — это ванильный микролибер JS, который позволяет вам изменять размеры элементов на основе размеров области просмотра, не полагаясь на ошибочные CSS-модули vh / vw / vmin / vmax.

Ребята с маленьким вьюпортом: пример может показаться вам не очень хорошим.Каждая минута, которую я трачу на улучшение этого примера страницы, — это минута, когда я мог бы улучшить саму библиотеку, поэтому я не буду переборщить с этим 🙂

 class = "vw25" 

Независимость от устройства: работает везде, от IE8 до Mobile

 class = "vw25" 

Легковес: только ~ 1000 байт после gzip

 class = "vw25" 

Сверхбыстрый: не работает с DOM и не анализирует существующий CSS.

 class = "vw25" 

Нет зависимостей: написано на чистом ванильном JS

 class = "vwfs3 vhmt7 vhmb3" 
Пример: галерея на основе области просмотра

 class = "vwfs3 vhmt7 vhmb3" 
Как это работает

Относительные единицы окна просмотра — это здорово, но это не так — они ошибочны, ненадежны и несовместимы с реализацией в браузерах.vUnit.js предлагает легкую и надежную альтернативу им и весит ~ 600 байт после gzip.

vUnit.js вычисляет размеры области просмотра браузера и создает правила CSS в диапазоне от 1% до 100% от его размера. Эти правила затем вставляются в таблицу стилей, которая вводится на лету в тег заголовка — проверьте эту страницу, проверьте последнюю таблицу стилей, чтобы увидеть.

Наблюдатель, запускаемый каждые 100 мс, проверяет, был ли изменен размер области просмотра, и соответственно регенерирует правила CSS.Это кросс-платформенное решение без событий, позволяющее отслеживать все, что может вызвать изменение размера окна просмотра, а именно:

  • Изменение размера окна на рабочем столе;
  • Смена ориентации на моб.
  • Появление / исчезновение полос прокрутки на рабочем столе;
  • Появление / исчезновение навигационных полос на мобильном телефоне;
  • Масштабирование на мобильных и настольных компьютерах;
  • Панель загрузки на рабочем столе;
  • Запрос сохранения пароля на рабочем столе;
  • и т. Д.

 class = "vwfs3 vhmt7 vhmb3" 
Как использовать

 class = "vwfs3 vhmt7 vhmb3" 
Советы профессионалов
  1. Загрузите vUnit на головной тег , чтобы избежать FOUC .
  2. Добавьте переход CSS на мобильном устройстве , чтобы он не дрожал при появлении / исчезновении адресной строки.
  3. vUnit работает довольно быстро, но избегает раздувания CSSMap свойствами, которые вы не собираетесь использовать.
  4. vUnit не должен заменять вашу сетку , только для улучшения вашего дизайна.
  5. Всегда рассматривает пользователей, не использующих JS .

 class = "vwfs3 vhmt7 vhmb3" 
Кредиты Press Me! .