vw, vh, vmin, vmax — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
    1. vh
    2. vw
    3. vmin
    4. vmax
  4. На практике
    1. Денис Ежков советует

Кратко

Скопировано

Это относительные единицы измерения. Все они задают размер относительно размеров окна браузера (viewport), то есть видимой части документа.

Пример

Скопировано

Ширина блока будет равна 30% ширины вьюпорта, а высота — 50% высоты вьюпорта:

div {  min-width: 30vw;  height: 50vh;}
          div {
  min-width: 30vw;
  height: 50vh;
}

Как понять

Скопировано

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

vh

Скопировано

Размер указывается в процентах от высоты вьюпорта (viewport height). 100vh соответствует полной высоте вьюпорта. 1vh = 1% высоты вьюпорта.

Открыть демо в новой вкладке

vw

Скопировано

Размер в процентах от ширины вьюпорта (viewport width). 100vw соответствует полной ширине вьюпорта. 1vw = 1% ширины вьюпорта.

vmin

Скопировано

Размер в процентах от меньшей размерности вьюпорта. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.

Открыть демо в новой вкладке

vmax

Скопировано

Размер в процентах от большей размерности вьюпорта. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 В операционных системах Linux и Windows использование 100vw может осложняться тем фактом, что вертикальный скроллбар является частью вьюпорта и уменьшает фактическую ширину страницы. Но ширина вьюпорта остаётся неизменной. Поэтому, если есть вертикальный скролл, то задание ширины блока 100vw вызовет появление горизонтального скролла. На macOS этот эффект не наблюдается, потому что там скролл располагается НАД содержимым страницы, а не рядом.

Открыть демо в новой вкладке

В ОС Linux и Windows в этом примере будет наблюдаться горизонтальный скролл.

🛠Относительные единицы измерения прекрасно подходят для адаптивной вёрстки, а если учесть, что на мобильных устройствах скролл находится НАД содержимым страницы, у нас вообще нет никаких проблем с этими единицами.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

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

ctrl + alt + ←

→

rem, em

ctrl + alt + →

Дизайн журнал №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

    ❮ Предыдущая Далее ❯

    Единицы CSS

    CSS имеет несколько различных единиц измерения длины.

    Многие свойства CSS принимают значения длины, например ширина , поля , отступ , размер шрифта и т. д.

    Длина — это число, за которым следует единица длины, например 10px , 2em и т. д.

    Пример

    Установка различных значений длины, используя px (пиксели):

    h2 {
      размер шрифта: 60 ​​пикселей;
    }

    p {
      размер шрифта: 25 пикселей;
    высота строки: 50px;
    }

    Попробуйте сами »

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

    0 единицу измерения можно не указывать.

    Для некоторых свойств CSS допускается отрицательная длина.

    Существует два типа единиц длины: абсолютные и относительные .

    Абсолютные длины

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

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

    Блок Описание
    см сантиметра Попробуй
    мм миллиметра Попробуй
    в дюйма (1 дюйм = 96 пикселей = 2,54 см) Попробуй
    пикселей * пикселя (1 пиксель = 1/96 дюйма) Попробуй
    пт балла (1 балл = 1/72 от 1 дюйма) Попробуй
    шт. пика (1 шт = 12 пт) Попробуй

    * Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

    Относительная длина

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

    №
    Блок Описание
    эм Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта) Попробуйте
    бывший Относительно x-высоты текущего шрифта (используется редко) Попробуйте
    ч Относительно ширины «0» (ноль) Попробуйте
    рем Относительно размера шрифта корневого элемента Попробуйте
    ВВ Относительно 1% ширины окна просмотра* Попробуйте
    вх Относительно 1% высоты окна просмотра* Попробуй
    об/мин Относительно 1% меньшего размера области просмотра* Попробуйте
    вмакс Относительно 1% большего размера окна просмотра* Попробуйте
    % Относительно родительского элемента Попробуйте

    Совет: Единицы em и rem удобны для создания идеальных масштабируемая планировка!
    * Viewport = размер окна браузера. Если окно просмотра 50см широкий, 1vw = 0,5см.

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

    Цифры в таблице указывают первую версию браузера, которая полностью поддерживает единица длины.

    Единица длины
    em, ex, %, px, cm, mm, in, pt, pc 1,0 3,0 1,0 1,0 3,5
    ч 27,0 9,0 1,0 7,0 20,0
    рем 4,0 9,0 3,6 4.1 11,6
    вх, вв 20,0 9,0 19,0 6,0 20,0
    об/мин 20,0 12,0 19,0 6,0 20,0
    вмакс 26,0 16,0 19,0 7,0 20,0

    ❮ Предыдущий Далее ❯


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

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

    Поиск

    ?

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

    — CR

    • global»>
      Глобальное использование
      97,06% + 0,62% «=» 97,68%

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

    Chrome
    1. 4–19: не поддерживается
    2. 20–25: частичная поддержка
    3. 26–110: поддерживается
    4. 111: поддерживается
    5. 112–903: поддерживается0343
      Edge
      1. 12 — 15: Частичная поддержка
      2. 16 — 110: поддержано
      3. 111: Поддержано
      Safari
      1. 3,11-70324.
      2. 62% — Supported»> 16.3: Supported
      3. 16.4 — TP: Supported
      Firefox
      1. 2 — 18: Not supported
      2. 19 — 110: Supported
      3. 111: Supported
      4. 112 — 113: Supported
      Opera
      1. 9 — 12.1: Not supported
      2. 15 — 94: Supported
      3. 95: Supported
      IE
      1. 5.5 — 8: Not supported
      2. 9: Partial support
      3. 10: Partial support
      4. 11: Частичная поддержка
      Chrome для Android
      1. 63% — Supported»> 111: Поддерживается
      Safari на iOS
      1. 3.2–5.1: Не поддерживается
      2. 7 3: Частичная поддержка6
          0417 8 — 16.2: Supported
        1. 16.3: Supported
        2. 16.4: Supported
        Samsung Internet
        1. 4 — 19.0: Supported
        2. 20: Supported
        Opera Mini
        1. all: Not supported
        Opera Mobile
        1. 10 — 12.1: не поддерживается
        2. 73: Поддерживается
        UC Browser для Android
        1. 13,4: поддержан
        и BROUSSOR
          22222222222222222222222222222222222222222222222222222222222222222222н.

          No related posts.