Css vh единица измерения: Занимательная вёрстка с единицами измерения области просмотра / Хабр

Дизайн журнал №1.

• Все хотят быть красивыми, поэтому поиски идеальных средств по уходу и макияжу никогда не прекращаются. В эру Интернета большая часть этих поисков происходит в сети. Поэтому сайтов, посвященных индустрии красоты сейчас немало. В этой подборке мы собрали интересные примеры веб-дизайна на эту тему. Смотрите!

  [an error occurred while processing the directive]

• У приложения есть две характеристики, которые делают его крутым: функции и детали. Функции привлекают пользователей, а детали заставляют его остаться с вами. Именно благодаря деталям продукт выделяется на фоне ему подобных.

  Микровзаимодействия — один из лучших инструментов обеспечить пользователям приятный опыт. Читайте!
  [an error occurred while processing the directive]

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

  [an error occurred while processing the directive]
• Ретуширование кожи по прежнему остается одним из самых популярных видов пост-обработки фотографий. Кожа должна быть идеальной, сиять, но при этом не выглядеть слишком размытой и пластмассовой. Для того, чтобы добиться этого нужно набить и руку. Пройти этот этап необходимо, но если вы уже на следующей профессиональной ступени, можно немного схитрить и заставить Photoshop сделать за вас рутинную работу. В этой подборке вы найдете экшены для обработки кожи на фотографиях. Выбирайте!

  [an error occurred while processing the directive]

• 10 апреля 2019 | Опубликовано в Веб-дизайн | Комментарии отключены

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

  [an error occurred while processing the directive]

• 10 апреля 2019 | Опубликовано в css | Комментарии отключены

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

  [an error occurred while processing the directive]

• Техника работы со спиртовыми чернилами непроста. Здесь важно работать с одной стороны быстро, с другой аккуратно и точно. Даже в одном цвете это целое испытание, а когда цветов несколько, получить достойный результат очень сложно. Зато какие разводы и прозрачные переходы получаются в итоге! Сегодня мы собрали примеры таких потрясающих работ. Смотрите!

  [an error occurred while processing the directive]

• 9 апреля 2019 | Опубликовано в Уроки | Комментарии отключены

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

  [an error occurred while processing the directive]

• Весной и летом становятся все более популярны дизайнерские работы с ботаническими элементами. Цветы, листья и зелень создает настроение романтики и свежести. Сегодня мы собрали бесплатные и интересные типографические работы с ботанической тематикой. Выбирайте!

  [an error occurred while processing the directive]



Друзья

• fntw™
• Smashing Journal
• Womtec — блог о дизайне

[an error occurred while processing the directive]

Единицы измерения в CSS — Code Lab

Когда вы говорите о расстоянии между двумя местами, такими как ваш дом и дом вашего друга, вы говорите о километрах или метрах.

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

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

.box {
  width: 100px;
  height: 100px;
}

100 — числовое значение, а px (пиксель) — единица измерения CSS. Это наиболее распространенная единица измерения CSS, которую мы будем использовать.

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

Единицы CSS можно разделить на две основные категории:

1. Абсолютные
2. Относительные

Изучим каждую из них подробно.

Навигация по статье

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

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

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

Для логотипов сайтов обычно используют абсолютные единицы. Большинство из этих единиц используются для печати, единственная единица, широко используемая для веб-сайтов, — это пиксель (px). Если мы посмотрим на пример, то поймем, что именно означает абсолютный . Мы возьмем div и установим абсолютные единицы измерения в качестве его размеров, тогда мы увидим, как изменение окна просмотра не влияет на размеры div.

<html>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint modi
      similique ducimus laudantium tempora vitae facere ipsa, ipsum id, commodi
      quisquam totam labore vel cum maiores, a omnis molestiae reiciendis.
    </div>
  </body>
</html>

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  font-size: 20px;
  color: red;
  background-color: beige;
}

Вывод, как мы видим в браузере:

Мы видим, что независимо от размера окна просмотра размеры div внутри не меняются. Вот что означают абсолютные единицы. Они остаются одинаковыми при любом размере экрана.

Виды абсолютных единицы в CSS

1. Пиксели (px) — широко используются на веб-сайтах для создания элементов фиксированного размера (например, в логотипе), т. е. мы не хотим, чтобы они меняли размер при изменении размера экрана. 1px = 1/96 дюйма.
2. Пункты (pt) — в основном используется в принтерах для печати вывода на бумаге и не так широко используется для вывода на экран. 1pt = 1/72 дюйма.
3. Пикас (pc) — также как и пункты используется для печати. 1 шт = 1/6 дюйма
4. Сантиметры (cm) — это наш старый добрый сантиметр, который мы все знаем 🙂 2,54 см = 1 дюйм.
5. Милиметры (mm) — 10 мм = 1 см.
6. Дюймы (in)

В относительных единицах мы говорим с точки зрения одного и того же свойства, например, если мы говорим о ширине элемента в относительных единицах, то она относится к ШИРИНЕ родительского элемента/окна просмотра. Далее вы увидите это на конкретных примерах.

Относительные единицы подходят для масштабирования элементов по отношению к другим элементам на той же странице, т. е. для обеспечения адаптивности элемента. Давайте возьмем пример, где мы бы установим ширину div равной ровно 50% ширины body, и она должна автоматически регулироваться относительно body.

<html>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint modi
      similique ducimus laudantium tempora vitae facere ipsa, ipsum id, commodi
      quisquam totam labore vel cum maiores, a omnis molestiae reiciendis. 
    </div>
  </body>
</html>

.box {
  width: 50%;
  height: 200px;
  padding: 20px;
  font-size: 20px;
  color: red;
  background-color: beige;
}

Вывод в браузере:

Из приведенных выше двух изображений видно, что в любой момент времени ширина элемента div составляет ровно 50% ширины родителя (в нашем случае— тела body). Это то, что делает веб-страницы «отзывчивыми».

Теперь давайте рассмотрим каждую из относительных единиц, доступных в CSS.

Проценты

Проценты позволяют измерять размер элемента относительно размеров родителя. Например, если мы установим ширину HTML-элемента равной K %, тогда его ширина будет рассчитываться следующим образом:

Ширина элемента = (K/100) * Ширина родительского элемента

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

EM

Значение EM наследуются относительно своего родителя (также как и проценты). Таким образом, если мы установим размер родительского шрифта равным 2em, а затем снова установим размер дочернего шрифта равным 2em, он будет добавлен к 4em (т.е. 400% от значения по умолчанию)! 

Вариант использования: в основном используется, чтобы задать адаптивный размер шрифта. Посмотрим пример ниже:

<html>
  <body>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci,
      fuga.<br /><br />
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, vero.
      </div>
    </div>
  </body>
</html>

body {
  font-size: 16px;
}
div {
  font-size: 32px;
  padding: 10px;
  background-color: aliceblue;
  max-width: 500px;
}
.big-text {
  font-size: 1.5rem;
  padding: 10px;
  background-color: cornsilk;
}

В браузере:

Стандартный размер шрифта был задан в body и равен 16px. В элементе div мы увеличили размер шрифта в полтора раза относительно его значение в родителе body. В элементе big-text еще раз увеличили размер, относительно div. Таким образом, для big-text получаем шрифта:

16px * 1.5 * 1.5 = 36px

EM может вызвать проблемы в случае, если код CSS становится сложнее. Для того, чтобы исправить недостатки em был создан REM.

REM

Эта единица противодействует суммирующему эффекту таких единиц, как % и em. rem скорее означает Root em . Это означает, что браузер будет игнорировать все корректировки, сделанные для родительских элементов, и будет масштабировать элемент HTML, к которому применяется свойство, на основе корневого значения/значения по умолчанию для этого конкретного элемента.

<html>
  <body>
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci,
      fuga.<br /><br />
      <div>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, vero.
      </div>
    </div>
  </body>
</html>

div {
  font-size: 32px;
}
. big-text {
  font-size: 1.5rem;
}

Вывод в браузере:

В этом коде CSS размер шрифта div установлен 32px (то есть в два раза больше базового шрифта, заданного в body). Если бы мы не задавали размер текста для элемента big-text, то он бы просто наследовал значение 32px от своего родителя div. Однако для big-text мы задали значение 1.5rem. То есть сделали размер текста в полтора больше относительно корневого родителя body, но никак не div! 

Таким образом, для big-text мы получили размер шрифта:

16px * 1.5 = 24px. 

VH

VH — означает высоту области просмотра. Если мы хотим, чтобы элемент имел точно такую ​​же высоту, как и область просмотра/окно просмотра, необходимо задать 100vh для обозначения высоты элемента.

Пример использования: в основном используется для страниц, занимающих всю высоту области просмотра.

VW

VW означает ширину области просмотра. 100vw означает 100% ширины области просмотра/окна просмотра.

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

Пример использования VH и VW:

<html>
  <body>
    <div></div>
  </body>
</html>

.box {
  background-color: #9acd32;
  width: 50vw;
  height: 100vh;
}

В браузере:

Для блока box мы задали ширину 50vw (половина от ширины окна браузера) и высоту 100vh (на всю высоту окна браузера).

Vmin

Единица Vmin позволяет выбирать наименьшее значение из ширины VW и высоты VH браузера. Например: если ширина браузера меньше его высоты, то 1 Vmin = 1 VW. 

Используется для адаптивной верстки. Если мы хотим поместить элемент в область просмотра, мы должны отдать предпочтение минимуму из двух vh и vw.

Vmax

Единица Vmax напротив выбирает большее значение из ширины и высоты браузера. Например: если ширина браузера больше его высоты, то 1 Vmax = 1 VW.  

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

1. Значения абсолютных единиц не зависят ни от каких других факторов и остаются неизменными независимо от любых изменений. В то время как в относительных единицах значения зависят от некоторого фактора, и изменение этого фактора приведет к изменению значения.
2. Относительные единицы измерения предпочтительнее абсолютных единиц для создания адаптивных сайтов, потому что, когда HTML-элементы установлены в относительные единицы, они масштабируются по отношению к размеру окна просмотра, поэтому размер элементов будет автоматически изменяться, чтобы соответствовать размеру экрана, т.е. становится адаптивным.
3. Безразмерные размеры: если числовое значение равно нулю, единицу измерения можно пропустить.

Единицы области просмотра: vw, vh, vmin, vmax

Могу ли я использовать

Поиск

?

Единицы области просмотра: vw, vh, vmin, vmax

— CR

• global»>

  Глобальное использование

  97,29% + 0,54% «=» 97,83%

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

Chrome

1. 4–19: не поддерживается
2. 20–25: частичная поддержка
3. 26–111: поддерживается
4. 112: поддерживается
5. 903 113–1101: поддерживается 13 Край
   1. 12 — 15: Частичная поддержка
   2. 16–111: Поддерживается
   3. 112: Поддерживается

   Safari

   1. 3.1–5.1: Не поддерживается
   2. 00% — Partial support»> 6: Частичная поддержка
   6.0: Поддерживается
   4. 16.4: поддерживается
   5. 16.5 — TP: Поддерживается

   Firefox

   1. 2 — 18: Не поддерживается
   2. 19 — 111: Поддерживается
   3. 112: Поддерживается
   4. 903 5 903 Поддерживается 5 903 5 901 13 Opera
      1. 9 — 12.1: Нет поддерживается
      2. 15 — 94: поддерживается
      3. 95: поддерживается

      IE

      1. 5.5 — 8: не поддерживается
      2. 06% — Partial support»> 9: частичная поддержка
      3. 1 : 0 85 частичная поддержка
      4. 10:01 частичная поддержка поддержка

      Chrome для Android

      1. 112: Поддерживается

      Safari на iOS

      1. 3.2 — 5.1: Не поддерживается
      2. 6: Частичная поддержка
      3. 7: Частичная поддержка
      4. 5
      5. 8 — 1: Частично поддерживается
      6. 8 — 08 16.4: Поддерживается
      7. 16.5: Поддерживается

      Samsung Internet

      1. 4–19.0: Поддерживается
      2. 91% — Supported»> 20: Поддерживается

      Opera Mini

      1. все: Не поддерживается
      2 Opera Mobile 130 10–12.1: не поддерживается
   5. 73: Поддерживается

   Браузер UC для Android

   1. 13.4: Поддерживается

   Браузер Android

   1. 2.1 — 4.3: Не поддерживается 904415 Поддерживается
   2. 112: Поддерживается

   Firefox для Android

   1. 110: Поддерживается

   Браузер QQ

   1. 13.1: Поддерживается

   Браузер Baidu

   9 9001 13.18: Поддерживается Браузер KaiOS

   1. 2.5: Поддерживается
   2. 00% — Supported»> 3: Поддерживается

   Ресурсы:

   Сообщение в блоге о выпуске Back-Forward

   Сообщение в блоге

   Buggyfill — Polyfill, исправляющий ошибки, поддержка Polyfill

   1 9 01801 9 8

   Описание всех 24 единиц CSS Viewport

   1 августа 2022 г.

   В CSS

   раньше было только четыре единицы области просмотра, которые вам нужно было знать, и они могли охватить практически все мыслимые варианты использования. Однако время шло и технологии менялись, и этих четырех единиц области просмотра уже не хватало для обработки всех вариантов использования. Из-за этого CSS добавил еще 20 единиц области просмотра, что звучит много, но они разбиты на шесть основных единиц области просмотра с тремя уникальными модификаторами, что дает нам в общей сложности 24 комбинации.

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

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

   Исходные четыре единицы области просмотра

   Основными единицами области просмотра CSS являются vw , vh , vmin и vmax . Скорее всего, вы использовали или видели эти устройства раньше, поэтому я постараюсь быть максимально кратким, объясняя их.

   vw

   vw означает Ширина области просмотра и представляет собой процент ширины области просмотра. Число, расположенное перед по сравнению с , представляет собой процент ширины области просмотра, на которую будет приходиться эта длина. Например, если вы написали 10vw , то это будет представлять длину 10% от ширины вашего окна просмотра.

   Окно просмотра — это просто красивое слово для размера вашего экрана, поэтому, если вы находитесь на большом рабочем столе шириной 1920px, 10vw будет представлять 192px. Если бы вместо этого вы использовали мобильный телефон с шириной 300 пикселей, то 10vw было бы всего 30 пикселей.

   vh

   vh означает Viewport Height и точно такой же, как vw , но для высоты вместо ширины. Эти два блока можно использовать в комбинации, чтобы легко заполнить весь экран элементом.

   мин. и макс.

   vmin и vmax представляют максимальный и минимальный размер области просмотра. Например, если вы используете телефон шириной 300 пикселей и высотой 800 пикселей, vmin будет представлять ширину области просмотра, а vmax — высоту устройства. Эти единицы действительно полезны, если вам нужно определить размер элемента на основе наименьшего/наибольшего размера экрана. Например, следующий CSS создаст квадрат максимально возможного размера без переполнения в любом направлении, поскольку он никогда не будет больше 100% наименьшего размера экрана.

   Две новые единицы области просмотра

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

   vi

   vi означает Viewport Inline и представляет линейное направление вашего документа. В горизонтальном направлении письма это соответствует ширине вашего окна просмотра, а в вертикальном направлении письма это высота вашего окна просмотра. Самый простой способ запомнить направление встроенного текста — помнить, что это то же самое направление, что и ваш текст. Еще один способ запомнить это: если у вас есть два встроенных элемента (например, два интервала) рядом друг с другом, направление, в котором они складываются, является вашим встроенным направлением.

   vb

   vb означает Viewport Block и представляет направление блока вашего документа. Это противоположно vi , поэтому в горизонтальном направлении письма это будет соответствовать высоте окна просмотра, а в вертикальном документе это будет представлять ширину вашего окна просмотра. Если вы изо всех сил пытаетесь запомнить этот блок, просто помните, что направление блока всегда будет направлением, в котором элементы блока (например, два div) будут располагаться друг над другом.

   Модификаторы единиц области просмотра

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

   Это модификаторы s , l и d . Чтобы использовать модификатор, вам просто нужно поместить модификатор после числа и перед единицей измерения, например 10svw . Это дает нам 4 комбинации для каждой из 6 единиц области просмотра. vw , svw , lvw и dvw .

   До сих пор все, что мы рассмотрели в этой статье, не использовало модификатор, что вполне допустимо. Когда вы не используете модификатор на единицу, например, 10vw или 10vh , браузер автоматически по умолчанию будет использовать один из 3 модификаторов в зависимости от реализации браузера.

   Модификатор s

   Модификатор s означает Маленький и представляет наименьшее возможное окно просмотра. В нашем примере с мобильным телефоном это будет размер области просмотра при отображении строки URL. Если вы установите для элемента значение 100svh , он будет занимать 100% высоты экрана в зависимости от размера экрана, когда отображается строка URL. Неважно, видна строка URL или нет, этот блок всегда будет основывать свой размер на том, каким было бы окно просмотра, если отображается строка URL.

   l Модификатор

   Модификатор l означает Large и представляет максимально возможную область просмотра. Это в значительной степени противоположно модификатору s . В нашем примере с мобильным телефоном это будет размер области просмотра, когда отображается строка URL , а НЕ . Если вы установите для элемента значение 100lvh , он будет занимать 100% высоты экрана в зависимости от размера экрана, когда отображается строка URL-адреса , а не . Неважно, видна строка URL или нет, этот блок всегда будет основывать свой размер на том, что было бы в окне просмотра, если строка URL равна 9.0342 НЕ показывает, что означает, что если вы установите элемент на 100lvh , а строка URL показывает, что технически он будет больше экрана.

   Модификатор d

   Модификатор d означает Динамический и представляет текущий размер области просмотра. Это как бы комбинация модификатора s и l . В нашем примере с мобильным телефоном это всегда будет размер текущего окна просмотра, независимо от того, отображается строка URL или нет. Если наша строка URL отображается, то 9Модификатор 0204 d имеет тот же размер, что и модификатор s , а если строка URL имеет значение , НЕ , показывающее, что модификатор d имеет тот же размер, что и модификатор l .

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