Vh css что это

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д.

Используйте em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

div.mybox < border: 2px solid >@media (min-resolution: 2dppx) < /* Media with 2 or more dots per px */ div.mybox < border: 1.5px solid >>

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p < margin-left: 1em >h1
p < margin-left: 1rem >h1

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 12 Jan 2010;
Last updated Ср 06 янв 2021 05:40:49

vw , vh , vmin , vmax

Единицы измерения, которые считаются от размера окна браузера.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Пример

Скопировать ссылку «Пример» Скопировано

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

 div  min-width: 30vw; height: 50vh;> div  min-width: 30vw; height: 50vh; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

vh

Скопировать ссылку «vh» Скопировано

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

vw

Скопировать ссылку «vw» Скопировано

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

vmin

Скопировать ссылку «vmin» Скопировано

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

vmax

Скопировать ссылку «vmax» Скопировано

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

На практике

Скопировать ссылку «На практике» Скопировано

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

Скопировать ссылку «Денис Ежков советует» Скопировано

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

Чтобы всегда видеть скролл и возможные связанные с ним проблемы у пользователей других операционных систем, измените настройки по пути «Оформление» → «Показывать полосы прокрутки».

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

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

Единицы измерения viewport в CSS. Все 24 комбинации.

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

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

Оригинальные четыре единицы измерения

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

vw

vw расшифровывается как Viewport Width и представляет собой процент от ширины окна просмотра. Число, помещенное перед vw , представляет собой процент от ширины области просмотра, которой будет эта длина. Например, если вы написали 10vw , то это будет представлять 10% от ширины вашего окна просмотра. Окно просмотра (viewport) — это по сути размер вашего экрана, поэтому, если бы вы были на большом рабочем столе шириной 1920 пикселей, 10vw означало бы 192 пикселя. Если бы вы вместо этого использовали мобильный телефон шириной 300 пикселей, то 10vw был бы только 30 пикселей.

vh

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

.full-screen
vmin и vmax
vmin и vmax представляют собой максимальное и минимальное измерение области просмотра. Например, если вы работаете на телефоне шириной 300 пикселей и высотой 800 пикселей, vmin будет представлять ширину области просмотра, а vmax — высоту устройства. Эти единицы действительно полезны, если вам нужно определить размер элемента на основе наименьшего/наибольшего размера экрана. Например, следующий CSS создаст квадрат, который будет максимально большим, не переполняясь ни в каком направлении, поскольку он никогда не будет больше 100% от наименьшего размера экрана.
.no-overflow
Две новых единицы
CSS пытается отойти от строгой модели верха/низа, слева/справа, высоты/ширины к более динамичной модели начала/конца, блочной/инлайн модели. Основная причина этого изменения заключается в том, чтобы упростить внедрение различных направлений написания в коде. Если все ваше приложение переключается с горизонтального направления письма на вертикальное, идея верха/низа или ширины/высоты не обязательно означает одно и то же, поскольку, если вы хотите добавить отступы выше и ниже текста, это будет представлено как отступы слева и справа в вертикальной системе, а не заполнение сверху и снизу. Вот почему CSS добавил модули просмотра vi и vb .
vi
vi расшифровывается как Viewport Inline и представляет собой встроенное (инлайн) направление вашего документа. В горизонтальном направлении это соответствует ширине окна просмотра, а в вертикальном направлении это соответствует высоте окна просмотра. Самый простой способ запомнить направление встроенного текста — помнить, что это то же направление, в котором движется ваш текст. Еще один способ запомнить это: если у вас есть два встроенных элемента (например, два span ) рядом друг с другом, направление, в котором они складываются, является вашим встроенным направлением.
.horizontal < writing-mode: horizontal-tb; width: 10vi; /* То же, что и 10vw */ >.vertical < writing-mode: vertical-lr; height: 10vi; /* То же, что и 10vh */ >
vb
vb расшифровывается как Viewport Block и представляет собой направление блока вашего документа. Это противоположно vi , поэтому в горизонтальном направлении это будет соответствовать высоте окна просмотра, а в вертикальном документе это будет представлять ширину вашего окна просмотра. Если вы изо всех сил пытаетесь запомнить эту единицу, просто помните, что направление блока всегда будет направлением, в котором блочные элементы (например, два div ) будут складываться друг на друга.
.horizontal < writing-mode: horizontal-tb; width: 10vb; /* То же, что и 10vh */ >.vertical < writing-mode: vertical-lr; height: 10vb; /* То же, что и 10vw */ >
Модификаторы единиц измерения вьюпорта
До сих пор мы рассмотрели шесть основных типов модулей области просмотра, но есть три различных модификатора, которые вы можете добавить к единицам, чтобы они вели себя по-разному, когда ваше окно просмотра может изменять размеры. Например, когда вы просматриваете веб-страницы на мобильном телефоне, вы можете заметить, что адресная строка исчезает при прокрутке вниз. Когда это происходит, ваше окно просмотра технически меняет размер, так как теперь строка URL-адреса больше не занимает часть вашего окна просмотра. Текущие блоки CSS не имеют возможности справиться с этим изменением размера области просмотра, поэтому были добавлены эти модификаторы. Этими модификаторами являются s , l и d . Для того, чтобы использовать модификатор, вам просто нужно разместить модификатор после номера и перед единицей измерения, например 10svw . Это дает нам 4 комбинации для каждого из 6 модулей области просмотра. vw , svw , lvw и dvw . До сих пор все, что мы рассмотрели в этой статье, не использовало модификатор. Если вы не используете модификатор на устройстве, например 10vw или 10vh , браузер автоматически по умолчанию использует один из 3 модификаторов в зависимости от реализации браузера.
Модификатор s
Модификатор s расшифровывается как Small и представляет собой минимально возможное окно просмотра. В нашем примере с мобильным телефоном это будет размер окна просмотра при отображении строки URL. Если вы установите для элемента значение 100svh он будет занимать 100% высоты экрана в зависимости от размера экрана при отображении строки URL. Неважно, видна ли строка URL-адреса или нет, размер этого устройства всегда будет основываться на том, каким будет окно просмотра, если будет отображаться строка URL-адреса.
Модификатор l
Модификатор l расшифровывается как Large и представляет собой максимально возможное окно просмотра. Это в значительной степени противоположно модификатору s . В нашем примере с мобильным телефоном это будет размер окна просмотра, когда строка URL-адреса НЕ отображается. Если вы установите для элемента значение 100lvh , он будет занимать 100% высоты экрана в зависимости от размера экрана, когда строка URL-адреса НЕ отображается. Неважно, видна ли строка URL-адреса или нет, это устройство всегда будет основывать свой размер на том, каким будет окно просмотра, если строка URL-адреса НЕ отображается. Это означает, что если вы установите элемент на 100lvh , а строка URL-адреса показывается, то технически он будет больше, чем экран.
Модификатор d
Модификатор d расшифровывается как Dynamic и представляет текущий размер области просмотра. Это похоже на комбинацию модификаторов s и l . В нашем примере с мобильным телефоном это всегда будет размер текущего окна просмотра, независимо от того, отображается ли строка URL-адреса или нет. Если наша строка URL-адреса отображается, то модификатор d имеет тот же размер, что и модификатор s , а если строка URL-адреса НЕ отображается, модификатор d имеет тот же размер, что и модификатор l . Во время перехода между отображаемой и скрытой строкой URL-адреса это устройство будет динамически увеличиваться в размерах, поэтому оно всегда будет заполнять все доступное пространство. Это здорово, если вам нужно гарантировать, что размер элемента всегда зависит от области просмотра, но может быть обременительным, поскольку это вызовет много перерисовок, поскольку размер постоянно меняется.
Поддержка браузеров
С каждой интересной функцией CSS вы всегда должны учитывать поддержку браузера, и, к сожалению, поддержка браузера для этих новых модулей просмотра не очень хороша. В настоящее время эти новые единицы поддерживают >85% и на самом деле поддерживаются только в Safari и Firefox. Причина такого отсутствия поддержки заключается в том, что это предложение все еще находится на стадии рабочего проекта, что означает, что оно находится на очень ранней стадии своего жизненного цикла и довольно далеко от того, чтобы быть официальным CSS.
Итоги
Хотя 24 юнита могут показаться много, на самом деле это всего лишь шесть юнитов с тремя модификаторами, которые относительно просты. Эти простые комбинации, однако, дают нам большие возможности в построении идеального макета CSS.
Хуки useTransition и useDeferredValue в ReactJS 18


Похожие публикации:

Codewars как решать задачи
Как включить плиту graude с сенсором
Как включить цифровую подпись драйверов windows 7
Как впечатать текст в готовый документ