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

Leave a Comment / Css / By alexxlab / 16.01.1973

Содержание

Подробное объяснение единиц измерения CSS rem, em, vw, vh

Теги: css единица измерения rem em vw

единица измерения	объяснение	совместимость
em	Относительная единица длины относительно размера шрифта текста в текущем объекте изменяется в соответствии с размером родительского элемента.	хорошо
rem	Относительная единица длины относительно кратного размера шрифта следующего элемента (т.е. элемента html) не будет затронута его родительским элементом	IE9 +, Firefox 3.6+, safari5.0 +
vw	Относительно ширины области просмотра область просмотра делится на 100 единиц vw	Поддерживается всеми браузерами высокого уровня
vh	Относительно ширины области просмотра область просмотра делится на 100 единиц vh	Поддерживается всеми браузерами высокого уровня

1、em

Эквивалентно «временам», например, если размер шрифта текущего div равен 1.

5em, слово текущего div
Размер тела: размер шрифта, унаследованный текущим div *, в 1,5 раза.
Код:

<style>
.div{font-size:20px;}
.p{font-size:2em;}
.span{font-size:0.5em;}
</style>
<div>Размер текста в теге div составляет 20 пикселей
<p>Размер текста в метке P составляет 2em
<span>Размер текста в теге span равен 0.5em.</span>
</p>
</div>

Эффект:

Инструкции:
Единица измерения em изменяется в зависимости от размера родительского элемента, div — это родительский элемент p, p —
Родительский элемент span, поэтому размер тега p зависит от тега div, а размер тега span —
находится в теге p, не подчиняется тегу div.
Размер шрифта тега div равен 20px, размер тега p равен 40px, а размер шрифта тега span
— 20 пикселей

2、rem

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

Код:

<style>
html{font-size:16px;}
.div{font-size:30px;background-color:pink;padding:50px;}
.p{font-size:1rem;}
.span{font-size:0.5rem;}
</style>
<div>Размер текста в теге div составляет 30 пикселей
<p>Размер текста в метке P 1rem
<span>Размер текста в метке диапазона
0.5rem</span>
</p>
</div>

Эффект:

Объяснение:
Модуль rem устанавливается в соответствии с размером корневого узла, то есть в соответствии с размером HTML
установлено, оно не имеет ничего общего с родительским элементом, поэтому размер шрифта тега p равен 16 пикселям, а размер шрифта тега span
Размер шрифта составляет 8 пикселей.

3. VW и VH

Полное название: Viewport Width и Viewport Height, ширина и высота окна эквивалентны

1% ширины и высоты экрана, однако при работе с шириной более подходящим является единица измерения%, высота обработки
Vh блок лучше.
Код:

<style>
body{background-color:orange;}
. p{width:50vw;height:50vh;background-color:pink;fontsize:3em;}
</style>
<p>Ширина метки P составляет 50vw</p>

Эффект:

Инструкции:
1 vw эквивалентен 1% ширины страницы, например, если ширина страницы составляет 1000 пикселей, то 1 vw
— 10 пикселей, а vh — то же самое.
Ширина тега P равна 50vw, поэтому она составляет 50% ширины страницы, а высота — 50vh, поэтому просто
составляет 50% от высоты страницы.

4. Vmin и Vmax

Относительно минимального или максимального значения высоты и ширины области просмотра.
Например, ширина браузера установлена на 1200 пикселей, высота — на 800 пикселей, 1vmax = 1200/100 пикселей = 12 пикселей, 1vmin = 800/100 пикселей = 8 пикселей. Если ширина установлена в 600px, а высота установлена в 1080px, 1vmin равен 6px, а 1vmax не равен 10.8px.

Есть элемент, который вам нужно держать видимым на экране:

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

Если вы хотите, чтобы этот элемент всегда покрывал видимую область всего окна просмотра:

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

Интеллектуальная рекомендация

Развитие iOS — один случай

Что такое один пример, цель пения? Когда класс — это только один экземпляр, вам необходимо использовать один пример, то есть этот класс имеет только один объект, который не может быть выпущен во время…

Разница между typeof, instanceof и конструктором в js

Оператор typeof возвращает строку. Например: число, логическое значение, строка, объект, неопределенное значение, функция, Но это недостаточно точно. Следующие примеры представляют собой различные рез…

Установка и использование Cocoapods, обработка ошибок

Использование какао-стручков Общие команды CocoaPods: $pod setup Обновите все сторонние индексные файлы Podspec в локальном каталоге ~ / .CocoaPods / repos / и обновите локальное хранилище. $pod repo …

Коллекция инструментов с неограниченной скоростью для облачного диска Baidu

Примечание: Недавно я обнаружил, что скорость загрузки файлов на Baidu Cloud Disk очень низкая. Лао-цзы не может выкупить участников. Невозможно выкупить участников в этой жизни. Если у вас нет денег,…

Шаблон проектирования — Подробное объяснение шаблона заводского метода

Предисловие В предыдущей статье «Шаблон проектирования — Подробное объяснение простого шаблона Factory», мы можем знать, что у простой фабричной модели есть некоторые недостатки: Класс фабри…

29 сентября, весенняя облачная суббота

Ложь, правда и ложь, как в шахматы, но кто пешка? «Тень»…

Logstash Delete Field.

Проблема После того, как FileBeat приобретает информацию журнала, Logstash Prints Information. В этом процессе FileBeat передает свою собственную информацию о клиентах в логисту, если лог-журнал отфил…

Глава 2 2.1-2.16 Предварительный просмотр

2.1 Системный каталог Структура Команда: ls = список Используется для перечисления системных каталогов или файлов Корневой каталог является каталогом пользователя, сохраняет файл конфигурации или друг. ..

Java фактическое боевое боевое издание 103 страниц Ответ

…

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

Эпоха (день 0): пятница, 22 декабря 1899 года, григорианский календарь против китайского Нового года (двадцать пять лет в Гуансу), 20 ноября, зимнее солнцестояние Цзяцзы Диапазон лунного календаря: с …

px, %, em, rem, vw, vh, vmin, vmax – Полезное для разработчика

Всем привет! Меня зовут Анна Блок, и сегодня мы поговорим про единицы измерения в CSS. Наверняка, многие из вас знают о таких единицах измерения, как px и %. Однако, по мимо всего прочего, мы разберем, как работают rem, em, vh, vw, vmax и vmin.

Cтатья получится большой, поэтому разобьем её на две части. Здесь мы поговорим о том, как эти единицы измерения влияют на размер шрифта, т.е на font-size. Во второй части затронем тему, насколько удобно использовать такие единицы измерения для того что бы управлять свойствами padding, margin, height, width и border-radius.

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

Pixels

Давайте начнем с самого распространенного — px (c англ. pixels). Пиксель — это базовая, абсолютная и окончательная единица измерения. Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.

Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс box-px за счет которого мы и будем стилизовать текст, который находится внутри.

<div>
   <h3>Pixels</h3>
   <p>font-size:16px</p>
   <p>font-size:8px</p>
   <p>font-size:32px</p>
</div>

Обратите внимание, основные классы дублируются. На всю основную стилизацию влияет класс, который стоит после box.

Например, если просмотреть код CSS, то можно увидеть стилизацию .box-px .text-1.

.box-px .text-1 {
   font-size:16px;
}

В примере мы видим значение font-size:16px, то есть то, что написано в классе text-n, то и дублируется в CSS. Это сделано для наглядности. Вы должны понимать, что большинство браузеров по умолчанию имеют значение font-size: 16px. Если убрать свойство .box-px .text-1, то визуально ничего не изменится. При этом если мы вернем свойство назад, то тоже ничего не изменится, потому что это значение заложено по умолчанию в браузере. Однако, все что мы стилизуем далее — видоизменяется:

.box-px .text-2 {
   font-size:8px;
}
.box-px .text-3 {
   font-size:32px;
}

Если мы используем значение меньше 16px, то наш текст уменьшается. И наоборот: если мы будем использовать значение больше, то текст увеличится. Звучит логично, не так ли? Но как работают другие единицы изменения? Давайте разбираться дальше.

Percent

Следующее значение, которое мы рассмотрим это проценты (%). Вы же помните, что браузер по умолчанию использует значение 16px? Это значит, что все относительные единицы, которые мы будем использовать в дальнейшем тоже будут преобразовываться в проценты. Но мы этого с вами не увидим, т.к. эти процессы будут проходить внутри браузера.

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

<p>Lorem <span>Lorem<span>Lorem</span></span></p>

Для тега p добавим следующее:

p {
   font-size: 100%;
}

Если бы мы были браузерами, то высчитали значение font-size: 16px. Далее переходим к span. Стилизуем его:

p>span {
   font-size: 50%;
}

Мы увидим, что вложенный span и тот span, который находится внутри него, стали равнозначны значению 8px. Как мы это посчитали? Итак, font-size: 100% = 16px и если мы берем половину, то есть 50%, то половина этого значения и будет значение 8px.
Теперь давайте стилизуем еще большую вложенность:

p>span>span {
   font-size: 400%;
}

Если бы мы указали здесь значение 200%, вышло бы, что мы взяли 2 раза по 8px, складываем 8px + 8px = 16px. Если мы укажем здесь 400%, то здесь у нас станет значение в два раза больше, то есть 16px * 2 = 32px.

Ознакомиться подробнее с HTML и CSS можно тут:

Em

Давайте снова вернемся к нашему первому шаблону и поговорим про такую единицу измерения, как em. Давайте выясним, как будут себя вести данное значение, если мы вместо пикселей будем указывать относительную единицу em. Для этого создадим пример, у нас будет некий box внутри которого будет содержаться два текста один просто в div-е, другой во вложенном div-е с классом post.

<div>
   Lorem Ipsum
   <div>Lorem Ipsum</div>
</div>

Итак, как я уже сказала, по умолчанию в body у нас содержится font-size: 16px, далее стилизуем post

body {
   font-size: 16px;
}
.post {
   font-size: 1.2em;
}

Что бы понять какое значение содержится в post, вы можете взять в руки калькулятор, либо если вы используете систему macOS, то нажимаете на Command + пробел, и у вас всплывает окно, в котором вы можете делать вычисления. Итак, нам необходимо умножить 16 на 1.2 и у нас получается 19.2, это значит, что браузер выводит текст post, как 19.2px. Такую относительную единицу измерения удобнее использовать, если вам нужно изменить значение в body, например, поставить значение 30px. И тогда у вас значение в post будет вычисляться автоматически, то есть умножаться на 1.2. При этом если бы вы работали с пикселями и написали бы в post 30px, а в body в дальнейшем написали бы 50px, то ничего бы у вас не изменилось в значении post и соответственно вам бы пришлось вводить все это вручную.

Ознакомиться подробнее с HTML и CSS можно тут:

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

body {
   font-size: 30px;
}

то мы сразу увидим, какие значения изменяться. Например, пиксели не изменились совершенно, но при этом у нас поменялись проценты и em.
Далее идет единицы измерения rem, которую мы с вами рассмотри. И здесь, как вы видите, она не зависит от body, это первое ее отличие от em.

Вложенность
Пока мы полностью не перешли к теме rem, давайте рассмотрим еще один пример связанный со вложенностями. Самый удобный пример, связанный с вложенностями это списки, поэтому давайте будем работать с ними.

<ul>
   <li> Первый уровень
      <ul>
         <li> Второй уровень
            <ul>
               <li> Третий уровень
                  <ul>
                     <li>Четвертый уровень</li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Как я уже сказала body это 16px, поэтому сейчас здесь в CSS я этого записывать не буду, давайте сразу перейдем к стилям для тега ul, задав ему размер 0.8em

ul {
   font-size: 0.8em; 
}

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

ul {
   font-size: 0.8em; 
}

ul ul {
   font-size: 1em; 
}

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

Rem

Итак, как вы уже поняли, это значение не взаимодействует с body, оно взаимодействует с основным корневым тегом html, с которого начинается весь документ html. Если мы говорим сейчас о корневом узле, то у него есть особый селектор псевдокласса и записывается он как :root. В данном случае rem это и есть сокращение от слов «root em», то есть «корневой em». Если вы работаете с rem, то вы должны помнить, что его значения относительны не к текущему элементу, а к корневому. То есть в данном случае совершенно не важно, где вы используете значение rem, оно никак не будет влиять на все остальные значения. То есть если мы вернемся к предыдущему примеру и когда мы начали говорить о его проблемах с использованием em, то в данном случае если мы напишем rem, эта проблема отпадает. Вы так же можете использовать значения больше единицы, и при этом остальные уровни никак не видоизменяются. Они используют те же значения, что и первый элемент.

Ознакомиться подробнее с HTML и CSS можно тут:

Если вернуться к примеру где мы рассматривали em, то здесь мы можем скопировать box и написать box-rem, что бы его как-то отличать друг от друга

<div>
   Lorem Ipsum
   <p>Lorem Ipsum</p>
</div>

Если в стилях мы запишем

.box-rem .post {
   font-size: 1.2rem;
}

то увидим, что это значение никак не видоизменяется. Так как первый «Lorem ipsum» у нас записан вне тегов, то естественно он меняется по отношению к body, но при этом если мы запишем селектор :root

:root {
   font-size: 50px;
}

То мы увидим, что значение post меняется относительно этого сектора.

Ознакомиться подробнее с HTML и CSS можно тут:

Давайте создадим еще один пример и поговорим о некоторых тонкостях с использованием rem. Давайте снова создадим box, внутри будет тег h3 и p

<div>
   <h3>Home</h3>
   <p>Does your lorem ipsum text long for something a little fishier? Give our generator a try… it’s fishy!</p>
</div>

То, что я сейчас покажу оно будет являться антипримером и я не советую использовать это и, конечно же, в конце я объясню почему именно не следует использовать тот пример, который я сейчас вам покажу. Итак запишем селектор :root. Теперь давайте поговорим о том, как вычислить 10px с точки зрения em. Для этого мы снова открываем калькулятор. Что бы вычислить, сколько будет 10px, мы делим 10 на тот размер который у нас установлен по умолчанию, то есть на 16px итого у нас получается значение 0.625. Давайте запишем

:root {
   font-size: 0. 625em;  /*=10px */
}

Далее давайте будем стилизовать h3. Начнем вычислять font-size с точки зрения rem для этого нам необходимо 14 разделить на 10 и выходит 1.4rem

h3 {
   font-size: 1.4rem; /* =14px */
}

Этот метод удобен тем, что нам, по сути, не нужно прибегать к вычислениям, все это возможно вычислить в уме. Но я предлагаю сделать заголовок сделать все-таки чуть больше, например, 24px, в rem значении это будет 2.4rem.

h3 {
   font-size: 2.4rem; /* =24px */
}

Как вы видите по умолчанию, если я не буду стилизовать p, либо какие-то другие элементы, которые будут появляться на странице, например

<ul><li>Lorem</li><li>Lorem</li><li>Lorem</li></ul>

то все они автоматом будут иметь размер шрифта 10px. Это будет слишком маленький размер шрифта и на экранах он будет нечитабельным, а это значит, что вам придется для каждого элемента добавлять размер шрифта, что соответственно увеличит ваш код. То есть здесь в данном случае приходиться чем-то жертвовать и как мне кажется, все-таки нецелесообразно использовать такой метод. Если, например, вы не хотите использовать размер шрифта 10px по умолчанию, то вы можете использовать другое значение — 14px. Давайте, опять же вычислим, сколько это будет, для этого делим 14px на 16, выходит 0.875rem

:root {
   font-size: 0.875em; /*=14px */
}

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

h3 {
   font-size: 1.71rem; /* =24px */
}

В таком случае размер заголовка у нас стал таким же, как тогда когда у нас font-size составлял 10px. Конечно же, такое значение вычислять уже придется с калькулятором, однако как вы видите, работа с кодом будет значительно меньше.
Давайте предположим, что мы работаем с media запросами, например, это у нас разрешение под мобильники и далее нам необходимо сделать размер шрифта чуть больше, но уже для планшетов и desctop-ых устройств. То есть если мы будем использовать media запросы то внутри мы можем записать min-with: 768px и внутри media мы запишем селектор :root с font-size: 1em, то есть 16px

@media (min-width:768px) {
   :root {
      font-size: 1em;
   }
}

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

Ознакомиться подробнее с HTML и CSS можно тут:

VW/VH

Теперь давайте перейдем к следующим значениям, это единицы измерения которые относятся к размеру экрана устройства. То есть все те значения, которые начинаются с буквы V, с английского это «viewport», в переводе на русский язык «область просмотра». Итак:

vh = 1/100 высоты области просмотра
vw = 1/100 ширины области просмотра
vmin = 1/100 наименьших высоты или ширины области просмотра
vmax = 1/100 наибольших высоты или ширины области просмотра

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

.box-vw .text-1 {
   font-size: 2vw;
}

значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда это берется?! Это значение 2% от 1200px, то есть 1200 * 0.02 выходит 24px. При этом если взять, например, планшет, который в среднем составляет 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.
Значения vmin и vmax не применимы к font-size поэтому их уже рассмотрим в следующей части, но знайте, что эти значения есть и они работают в связке с vw и vh, однако их можно использовать не всегда, а только в том случае если они необходимы. И не забывайте про поддержку этих значений.

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

Смотреть видео:

Источник: https://tpverstak.ru/css-units-part-1/

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

Абсолютные единицы
Типографские единицы
Относительные единицы
Шрифтозависимые относительные единицы
Единицы области просмотра
Значения единиц измерения

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

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

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.


.one-cm { font-size: 1cm; }
.one-mm { font-size: 1mm; }
.one-in { font-size: 1in; }

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.


.one-point { font-size: 1pt; }
. one-pica { font-size: 1pc; }

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

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


.one-pixel { font-size: 1px; }
.one-percent { font-size: 1%; }

Пиксель — точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em — высота текущего шрифта, ex — высота символа «х» в нижнем регистре указанного шрифта.


.one-ex { font-size: 1ex; }
.one-em { font-size: 1em; }

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

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem — размер шрифта корневого элемента (<html>), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.


.one-rem { font-size: 1rem; }

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.


<div>00000</div>

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.


width: 50vw; /* 50% от ширины области просмотра */
height: 25vh; /* 25% от высоты области просмотра */

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


width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */
height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше */

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6. 1+ и Opera 15+.

Значения единиц измерения

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


p { font-size: 0.394in; } /* десятичная дробь */
p { margin: -1px; } /* отрицательное значение */

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


p { font-size: 1ex; }   /* корректно */
p { font-size: 0; }     /* корректно */
p { font-size: 0ex; }   /* корректно */
p { font-size: 1 ex; }  /* неправильно */
p { font-size: 1; }     /* неправильно */

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

Новые (и старые) единицы измерения в CSS, о которых вы никогда не слышали

Это перевод статьи Massimo Artizzu The new (and old) CSS units you’ve never heard about.

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

CSS тоже развивается, и скорее всего Houdini совершит новый прорыв в CSS, но его, к сожалению, адаптируют далеко не все. Мы всё так же проходим процесс совещаний специалистов, которые создают новые спецификации и всё такое… Не так, как с непрерывными изменениями стандарта TC39, но всё же.

Вы вероятно слышали но, скорее всего — нет! о единицах измерения в CSS, речь о которых пойдёт в этой статье. И нет, не о тех, «старых» vw и vh (которые предстоит объяснить тем, кто меньше разбирается в CSS).

Ниже перечислены новые единицы CSS, которые будут детально описаны в готовящемся CSS Value и Units Module Level 4.

lh и rlh

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

rlh, с другой стороны, эквивалентна тому, чем rem выступает для em: высоте строки главного элемента.

vi and vb

Еще одно интересное дополнение, подобно vw и vh — это процентное соотношение, относительно области просмотра (viewport). А именно:

vi составляет 1% от размера области просмотра (viewport) в направлении inline;
vb составляет 1% от размера области просмотра (viewport) в направлении block.

Что представляют из себя эти оси «inline» и «block»? Для языков с горизонтальным написанием, как английский или арабский, они соответствуют горизонтальному и вертикальному направлению, что делает эти две единицы измерения эквивалентными vw и vh.

Но для языков с вертикальным написанием (приходит в голову японский), эти направления взаимозаменяются.

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

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

ic

В отношении интернационализации, ic— это восточный эквивалент ch, он представляет собой размер символа 0. ic — размер CJK (китайского / японского / корейского ) идеограма (символа) 水 («вода», U + 6C34), поэтому его можно грубо интерпретировать как «количество идеограмов.

Но что это за «размер»? Это так называемая «advance measure» (предупредительная мера): если текст лежит горизонтально — это ширина, в противном случае — это высота. Обратите внимание, что та же концепция применима и к ch!

Ииии всё ещё нет поддержки браузерами.

cap

Это измерение так называемой cap-height. Спецификация определяет высоту капса как «приблизительно равную высоте заглавной латинской буквы». Существует алгоритм для её вычисления, даже для шрифтов, которые не содержат латинских букв, но я не буду объяснять подробности.

Ещё и потому, что мы не можем использовать их в каком-либо браузере.

Теперь немного конкретики

Давайте посмотрим на спецификацию постарше (Level 3), потому что хоть она и должна чаще использоваться и иметь широкую поддержку, в ней всё ещё присутствуют малоизвестные моменты…

turn и его братья

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

Мы используем deg для поворота элементов при transform, так? Один turn эквивалентен 360 deg. Всё очень просто. Полезно для анимации (особенно для вращения на 360 градусов) и значений прогрессии, вычисляемых в JavaScript.

Но подождите, есть ещё кое-что! grad и rad тоже имеют свои значения, и да, как вы догадываетесь — это грады (сотая часть прямого угла) и радианы (угол, длина дуги которого равна радиусу окружности), соответственно.

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

Q

Эта единица должна поддерживаться всеми браузерами, потому что она — часть Level 3. Но на факте поддерживает её только Firefox, и с относительно недавней 49 версии (сентябрь 2016).

Так что это, Q? Это всего лишь 0.25мм — четверть милиметра.

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

Соотношение сторон (Aspect ratio)

Не совсем единица измерения, потому что единица должна содержать чистое значение, но всё же это измерение. Соотношение сторон специально выражено через положительные целые числа, разделённые / (слеш или «солидус», говоря языком Unicode).

Где мы можем это использовать? В медиа-запросах конечно! Например:

@media screen and (min-aspect-ratio: 16/10) {
  /* something for wide screens */
}

Хорошие новости: это поддерживается любым браузером! Ура! 🎉

Hz and kHz

…Стоп, что? Как мы учили в универе, разве это не единицы частоты? Как они связаны с CSS?

Ответ на эти вопросы: да, — это единицы частоты и никакого отношения к CSS они не имеют, потому что в свойствах CSS в данный момент ничто не требует частоты. Но единицы частоты были сформулированы. Почему?

Возможно, для использования в будущем, на случай спецификации модуля таргетированного на синтез речи или какой-то акустический вывод. Уже разрабатывается CSS Aural style sheets module, он использует свойства, которые применяют частоту, но этот модуль ещё никто не видел.

Этот модуль был вытеснен новым, совместимым со Speech Synthesis Markup Language (SSML), который откликается на имя CSS Speech. Он всё ещё в разработке и содержит свойства (вроде voice-pitch), которые предусматривают использование частот, но он не готов.

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

CSS length | TuHub

Тип данных <length> — представляет размер или измерение расстояния. Он состоит из числа (<number>), за которым сразу следует единица измерения, то есть без пробела между ними. Единицы измерения не чувствительны к регистру.

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

Многие 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 {
    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.

Единицы измерения ch и rem поддерживаются в IE начиная с 9 версии.

Единица измерения ch не поддерживается WebKit браузерами.

Поддержка браузерами единиц измерения vw, vh, vmin и vmax показана в следующей таблице:

Viewport units: vw, vh, vmin, vmax

0.08%

0.01%

0.46%

Edge

103

1.07%

104

2.97%

Firefox

103

1. 85%

104

0.35%

Chrome

103

6.12%

104

15.1%

105

0.05%

106

0.02%

107

0.01%

Safari

15.5

0.69%

15.6

1.39%

16.0

0.01%

16.1

Safari on iOS

15.5

3.17%

15.6

7.91%

16.0

0.11%

16.1

Chrome for Android

105

42.02%

Полная поддержка

Частичная поддержка

С префиксом

Не поддерживается

Данные с сервиса caniuse.com

Пример

Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»

Цветовое оформление в CSS

Форматирование текста в CSS

МЕНЮ

Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

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

В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами. Свойство font-size записывается следующим образом:

Селектор {
font-size: значение с единицей измерения величины;
{

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

p {
font-size: 10px; /* установить размер шрифта 10 пикселей для всех абзацев */
{

В CSS 3 существует разнообразный набор единиц измерения для различных задач, давайте рассмотрим, что нам предлагает современный стандарт.

Абсолютные величины

Физические единицы:

Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
Сантиметры (cm), 1cm = 96px/2.54.
Миллиметры (mm), 1mm = 1/10 от 1cm.
Четверть миллиметра, (q) 1q = 1/40 от 1cm.
Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
Пункты (pt), 1pt = 1/72 дюйма.

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

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

Визуальные единицы:

Пиксели (px), 1px = 1/96 от 1in (дюйма).

body {
font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */
}

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

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

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

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

Процентные значения.

Давайте рассмотрим из чего формируются процентные значения, применяемые в каскадных таблицах стилей. Если для элемента не задан размер шрифта средствами CSS, то браузер применит к тексту свои значения «по умолчанию». В большинстве случаев текст, находящийся вне заголовков отобразится высотой 16 пикселей (базовый размер шрифта текста).

html {
font-size: 16px;
}

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

Давайте рассмотрим пример. Допустим, у всех параграфов (элемент <p>) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования процентных значений</title>
<style>
.halfFontSize {
font-size: 50%; 
}
.doubleFontSize {
font-size: 200%; 
}
</style>
</head>
	<body>
		<p>Обычный параграф на странице</p>
		<p>Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.</p>
		<p>Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента.</p>
	</body>
</html>

Результат нашего примера:

Рис.51 Пример использования процентных значений.

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

Первый параграф: 16px * 100% = 16px
Второй параграф: 16px * 50% = 8px
Третий параграф: 16px * 200% = 32px

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример наследования процентных значений</title>
<style>
div {
font-size: 12px; /* устанавливаем базовый размер шрифта для всех блоков <div> */
}
.doubleFontSize { /* устанавливаем размер шрифта в два раза больше чем родительский */
font-size: 200%; 
}
.doubleFontSize > div { /* использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский */
font-size: 200%; 
}
</style>
</head>
	<body>
		<div>Родительский div 12px
			<div>Блок, к которому применен стиль с размером шрифта 200% от родительского элемента.
				<div>Блок, который наследует значение</div>
			</div>
		</div>
	</body>
</html>

Результат нашего примера:

Рис.

52 Пример наследования процентных значений.

В данном примере для вложенного блока <div> с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок <div>, для которого мы установили размер шрифта 12px.

Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

12px * 200% = 24px

Если бы мы не изменили значение размера шрифта для блока <div>, то расчёт бы происходил исходя из базового шрифта:

16px(базовый размер шрифта) * 200% = 32px

Кроме того, мы, использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский.

Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т. к. расчёт происходит исходя из размера шрифта родительского элемента:

размер шрифта родительского элемента * 200% = 48px

Единица измерения еm.

Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

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

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

Например:

базовый размер текста = 1em = 100%
базовый размер текста * 2 = 2em = 200%
базовый размер текста * 0. 5 = 0.5em = 50%

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования значений em</title>
</head>
<body>
	<p style = "font-size:.8em;">font-size:0.8em</p>
	<p style = "font-size:80%;">font-size:80%</p>
	<p style = "font-size:1.5em;">font-size:1.5em</p>
	<p style = "font-size:150%;">font-size:150%</p>
	<p style = "font-size:1.8em;">font-size:1.8em</p>
	<p style = "font-size:180%;">font-size:180%</p>
</body>
</html>

Результат нашего примера:

Рис.53 Пример использования значений em.

Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

Единица измерения rеm.

Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример наследования значений em</title>
<style>
div {
font-size: 1.25em; 
}
</style>
</head>
	<body>
		<div>Блок 1
			<div>Блок 2
				<div>Блок 3
					<div>Блок 4
						<div>Блок 5
							<div>Блок 6
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

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

Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂

Рис.54 Пример наследования значений em.

Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования значений rem</title>
<style>
div {
font-size: 1.25rem; 
}
</style>
</head>
	<body>
		<div>Блок 1
			<div>Блок 2
				<div>Блок 3
					<div>Блок 4
						<div>Блок 5
							<div>Блок 6
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

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

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

Рис.55 Пример использования значений rem.

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

Единица измерения еx.

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

В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0. 5em.

Единица измерения ch.

Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

.width50 {
width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */
}

Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

Масштабируемые величины относительно экрана

С развитием стандарта каскадных таблиц стилей стали доступны такие единицы измерения, которые позволяют задать размеры относительно окна пользователя (области просмотра).

Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.
1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.
Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<title>Масштабируемые единицы измерения</title>
<style>
* {
margin: 0 ; /* внешние отступы для всех сторон*/
}
. viewportHeight30 {
font-size: 5vw; /* размер шрифта*/
width: 100vw; /* ширина блока */
height: 30vh; /* высота блока */
background-color: orange; /* цвет заднего фона */
}
.viewportHeight50 {
font-size: 4vw;
width: 75vw;
height: 50vh;
background-color: yellow;
}
.viewportHeight20 {
font-size: 3vw;
width: 50vw;
height: 20vh;
background-color: red;
}
</style>
</head>
	<body>
		<div class = "viewportHeight30">font-size: 5vw; width:100vw; height:30vh;</div>
		<div class = "viewportHeight50">font-size: 4vw; width:75vw; height:50vh;</div>
		<div class = "viewportHeight20">font-size: 3vw; width:50vw; height:20vh;</div>
	</body>
</html>

В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw, для третьего — 3vw), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw, для третьего — 50vw) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh, для третьего — 20vh).

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

Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

Полную информацию о работе с внешними отступами вы получите в статье учебника «Блочная и строчная модель в CSS», а работу с переполнением элементов мы рассмотрим в статье «Размеры блочных элементов в CSS».

Результат нашего примера:

Рис.57 Масштабируемые единицы измерения.

Минимальное и максимальное значение области просмотра

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

Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

.viewportMin { . viewportMax { width: 40vmin; width: 40vmax; height: 40vmin; height: 40vmax; } }

<!DOCTYPE html>
<html>
<head>
	<title>Vmin и vmax c масштабируемыми единицами измерения</title>
<style>
* {
margin: 0;
}
div {
display: inline-block; /* элементы <div> блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта*/
}
.viewportMin {
width: 40vmin; /* ширина блока */
height: 40vmin; /* высота блока */
background-color: black; /* цвет заднего фона */
}
.viewportMax {
width: 40vmax; /* ширина блока */
height: 40vmax; /* высота блока */
background-color: blue; /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "viewportMin">viewportMin<br>w&h - 40vmin</div>
		<div class = "viewportMax">viewportMax<br>w&h - 40vmax</div>
	</body>
</html>

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0.

Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin. Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

 400px (текущее минимальное значение viewport области просмотра) * 40% = 160px

Для высоты расчёт аналогичен:

 400px (текущее минимальное значение viewport) * 40% = 160px.

В итоге мы получили «квадрат Малевича».

Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

Ширина - 700px(текущее максимальное значение viewport) * 40% = 280px. 
Высота - 700px (текущее максимальное значение viewport) * 40% = 280px.

Обращаю Ваше внимание, что при изменении области видимости (размеров окна) браузер пересчитывает значения «на лету», что очень удобно и пригодится в будущем при адаптивном дизайне.

Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

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

Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax, iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия – некорректно работала единица измерения vh).
Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:

IE работает только с версии 9. 0 (поддерживает значение vm, вместо vmin).
IE 10, IE 11 не поддерживают значение vmax.
Edge 12, 13, 14 не поддерживают значение vmax.

Завершая данную большую тему, думаю стоит рассмотреть еще один способ как можно задать размер шрифта в CSS, а именно использование ключевых слов совместно со свойством font-size.

Например:

i {
font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов <i> */
}

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

Значение	Описание
medium	Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small	Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small	Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small	Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller	Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large	Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large	Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large	Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger	Устанавливает размер шрифта большего размера, чем у родительского элемента.

Рассмотрим пример использования ключевых слов на странице:

<!DOCTYPE html>
<html>
<head>
	<title>Ключевые слова для управления размером шрифта</title>
<style>
.medium {font-size: medium;}
.small {font-size: small;}
.x-small {font-size: x-small;}
.xx-small {font-size: xx-small;}
.smaller {font-size: smaller;}
.large {font-size: large;}
. x-large {font-size: x-large;}
.xx-large {font-size: xx-large;}
.larger {font-size: larger;}
</style>
</head>
	<body>
		<div class =  "medium">Блок с ключевым словом medium</div>
		<div class =  "small">Блок с ключевым словом small</div>
		<div class =  "x-small">Блок с ключевым словом x-small</div>
		<div class =  "xx-small">Блок с ключевым словом xx-small
			<div class =  "smaller">Блок с ключевым словом smaller</div>
		</div>
		<div class =  "large">Блок с ключевым словом large</div>
		<div class =  "x-large">Блок с ключевым словом x-large</div>
		<div class =  "xx-large">Блок с ключевым словом xx-large
			<div class =  "larger">Блок с ключевым словом larger</div>
		</div>
	</body>
</html>

В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

Результат нашего примера:

Рис.59 Использование ключевых слов для управления размером шрифта.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

Практическое задание № 13
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 150%:
```
body, div { /* создаем групповой селектор */
font-size: 150%; /* устанавливает размер шрифта 150% */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 14
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5em:
```
body, div { /* создаем групповой селектор */
font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).
Практическое задание № 15
У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5rem:
```
body, div { /* создаем групповой селектор */
font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */
}
```
Сделаем следующую разметку:
```
<body>Текст внутри тела документа
	<div>Текст внутри блока
		<div>Текст внутри вложенного блока</div>
	</div>
</body>
```
Ответьте на следующие вопросы к практическому заданию:
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
- Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
- Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.
После того как Вы ответили на вопросы, самостоятельно составьте страницу с задачей и проинспектируйте её, чтобы убедиться, что Вы ответили правильно. Размер шрифта для элемента в инспекторе можно увидеть в полном перечне свойств для элемента (фильтр в хром, вычислено в мозила и так далее).

Цветовое оформление в CSS

Форматирование текста в CSS

МЕНЮ

Единицы CSS — %, em, rem, px, vh, vw

Просмотреть обсуждение

Улучшить статью

Сохранить статью

Последнее обновление: 21 апр, 2022

Читать

Обсудить

Посмотреть обсуждение

Улучшить статью

Сохранить статью

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

% – Единица измерения % используется для установки размера шрифта относительно текущего размера шрифта.
em – Используется для установки относительного размера. Это относительно размера шрифта элемента.
Примечание: Здесь 2em означает удвоенный размер текущего шрифта.
rem – Относительно базового размера шрифта браузера.
пикселей – Определяет размер шрифта в пикселях. (96px = 1 дюйм)
vh – Относительно 1% высоты области просмотра.
vw – Относительно 1% ширины области просмотра.

Пример 1: Пиксель является абсолютной единицей для установки ширины, т. е. всегда одинаков. Процентная единица основана на относительной единице, т. е. на ее родительском размере.

HTML

< html >

< head >

< стиль >

. box {

90 фон: красный

граница: 1 пиксель сплошной черный;

поле: 10 пикселей;

}

.PARENT {

фон: белый;

граница: 1 пиксель сплошной черный;

}

. Фифти-процент {

.

}

. Один сотни {

ширина: 100 пикселей;

}

.PARENT {

Width: 250px;

;

}

Стиль >

.0065

< body >

< h4 >Output-1 h4 >

< div class = "коробка пятьдесят процента" > 50% Div >

< Div < Div < Div < Div < Div . 0066 = "коробка сотни" > 100px Div >

< > 7 666666666666666666666666666666666666666666666666666666666669006. 2 H4 >

< DIV Класс = "Parent" > 9003 666666667 66666667 666666666666667 6666666667 9666669 99669 " > " > " > "0066 < DIV Класс = "коробка пятьдесят процент" > 50% Div >

>

6>

9666666666666666666666666666666666666666666666666666666666666666> 96696666666666666666666666666666666666666666666666666666666666666666. «Box Stoute» > 100px Div >

DIV >

>

.0067

HTML >

Выход:

9 . высота (вх). 1vw равно одному проценту от всего размера экрана, поэтому 100 vw займет всю ширину, а 50vw, очевидно, займет половину ширины, но важная вещь относительно vw по сравнению с процентами заключается в том, что единицы области просмотра основаны на всем размере экрана, в то время как прямоугольники являются относительными. своему родителю.

HTML

< html >

< head >

< title >Page Title title >

< стиль >

 0066            . box { 
                 фон: красный; 
                 граница: 1 пиксель сплошной черный; 
                 поле: 10 пикселей; 
   } 
  
    .PARENT {
    ФОНАР: Белый; 
                 граница: 1 пиксель сплошной черный; 
   } 
  
   . Фифти-процент {
   . 
   } 
  
   . Фифти-VW {
    Ширить: 50VW; 
            } 
  
   . Десять пять-VH {
    Высота: 25VH; 
   } 
  
    .PARENT {
    Width: 100px; 
                 ; 
             } 
           style   > 
    head   > 
      
  <   body   > 
         <   h4   >Выход-1   h4   > 
         <   деление   класс   =   коробка0066> 50%  DIV  > 
    <  DIV   Класс   =   "Box Fifty-VW"  > 5066666666666666666666666666666666666666666666666666666666666666666666667.
         <   div   class   =   "box twenty-five-vh"   >25vh  div   > 
         <   hr  > 
    <  H4  > Выход-2   H4  > 
   66669 
   6699666666666666666666666666666666666666666666666666666666666666666666666666666. > 
    <  DIV   Класс   =   "коробка пятьдесят процент"  > 50%.0065    <  DIV   Класс   =   "Box Fifty-VW"  > 50 В.   "Box Twenty Five-VH"  > 25VH   DIV  > 
      DIV  > 
  9  9006> 
 69  >  9003  9  > 
 9 .0067  body   > 
      
    html   >

Output:

Example 3: Both REM units and EM units are relative но вместо того, чтобы относиться к вещам вокруг них, таким как ширина их родителей или высота родителей, они на самом деле относятся к размеру шрифта.

HTML

< html >

< head >

< title >Page Title< / Название >

< Стиль >

. Паран.0065 фон: белый;

граница: 1 пиксель сплошной черный;

}

. One-Rem {

Font-Size: 1REM; {0065 размер шрифта: 1em;

}

.

}

. TWO-EM {

FONT-SIZE: 2EM;

}

. PPARENT {

Font-Size: 30px;

}

style >

head >

< body >

< H4 > Выход-1 H4 >

< DIV < DIV < DIV . DIV >

< DIV Класс = «One-EM» > 1EM Div. 0066 < div class = "two-rem" >2rem div >

< div class = "two-em" >2em div >

< hr >

< h4 > Выход-2 H4 >

< DIV = " > 966 = " > 966 " 9006> 966 99669966996699669966996699669966996699669966996699006. 996699669966996699669966996699669966996699006. = "one-rem" >1rem div >

< div class = "one-em" >1em div >

< div class = "two-rem" >2rem div >

< DIV Класс = "Два-Эм" > 2 EM DIV > 2 66666666666666666666666666666666666666666666666669.0067 div >

body >

html >

Output:

Рекомендуемые статьи
Страница :
Изучение новых единиц CSS, относящихся к области просмотра
Рабочая группа CSS (CSSWG) недавно опубликовала обновленный рабочий проект спецификации CSS Values and Units Level 4 — документа, описывающего определение и значение грамматики CSS. типы.
Это обновление принесло несколько интересных функций, среди которых новые единицы области просмотра. Давайте посмотрим, что они из себя представляют и как они работают!
Единицы относительно видового экрана
Мы начнем с быстрого пересмотра текущих единиц измерения относительно окна просмотра.
Единицы длины области просмотра в процентах или так называемые единицы относительно области просмотра — это единицы CSS относительно исходного содержащего блока, прямоугольника, в котором расположен корневой элемент ( ). Сам блок основан на размере области просмотра (обычно окна браузера или iframe), отсюда и название категории единиц.
Известные юниты
В этой категории есть четыре юнита, с которыми вы уже должны быть знакомы:
vw — 1% ширины области просмотра
vh — 1% высоты области просмотра
vmin – меньше vw или vh
vmax – больше vw или vh
Вышеупомянутые устройства доступны во всех современных браузерах с поддержкой начиная с IE 10 (за исключением vmax ед. ).
Обычно вы видите единицы в действии для таких элементов страницы, как модальные окна, оверлеи и другие, обеспечивающие полноэкранный режим.
Прочие единицы
Теперь, помимо вышеупомянутых четырех единиц, новая спецификация фактически определяет две другие: vi и vb . Они уже давно являются частью уровня 4, но до сих пор не поддерживаются ни одним известным браузером. Тем не менее, они существуют, а это означает, что в конечном итоге браузеры будут их поддерживать, поэтому стоит знать, как они должны работать.
Оба модуля зависят от свойства режима письма , что делает их значения привязанными к направлению языка пользователя.
vi — 1% от размера окна просмотра в линейном направлении
vb — 1% размера области просмотра в направлении блока
В языках с горизонтальным написанием, таких как английский, единицы эквивалентны vw и vh соответственно. Для языков с вертикальной письменностью, таких как японский, единицы измерения меняются местами, что составляет 9.0066 vi равно vh и vb от до vw .
Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия
Подробнее →
Проблема пользовательского интерфейса браузера
Прежде чем мы перейдем к новым юнитам, нам сначала нужно понять, почему они вводятся.
Проблема заключается в интерфейсе User-Agent, также известном как пользовательский интерфейс браузера.
Хотя браузеры обычно имеют доступ к большому экрану на настольных компьютерах, этого нельзя сказать о мобильных устройствах. Вот почему мобильные браузеры часто минимизируют свой пользовательский интерфейс — например, панель поиска — для экономии места при прокрутке пользователем.
Расширение и свертывание пользовательского интерфейса в Safari iOS 15
Это позволяет отображать больше контента на экране одновременно, но возникает проблема: как реализовать единицы, относящиеся к области просмотра?
Исторически фактические значения единиц были смещены, чтобы адаптироваться к текущему состоянию пользовательского интерфейса браузера. Это оказалось плохим для взаимодействия с пользователем из-за того, что контент постоянно менялся, пока пользователь прокручивал страницу.
Таким образом, Safari, Chrome (примерно год спустя) и другие поставщики браузеров изменили это поведение, чтобы сделать единицы, относящиеся к области просмотра, зависимыми от размера области просмотра, когда пользовательский интерфейс браузера свернут. Это исправило некоторые проблемы, но добавило новые.
Теперь использование 100 с любой единицей области просмотра означало риск того, что часть страницы будет скрыта пользовательским интерфейсом браузера, когда она развернута. Это, в свою очередь, привело к тому, что такие методы стали антипаттерном для мобильных устройств, вынуждая разработчиков использовать обходные пути JavaScript.
Здесь вступают в действие новые единицы измерения и обновления спецификаций.
Варианты единиц измерения, относящиеся к видовому экрану
По правде говоря, новые юниты не совсем новые. Вместо этого они просто варианты уже существующих единиц, которые мы рассмотрели выше, отличающиеся размером области просмотра.
Посмотрим, что это значит.
UA-окно просмотра по умолчанию
Текущие единицы, начинающиеся с v* , теперь официально известны как единицы измерения области просмотра по умолчанию в UA, и их реализация размера области просмотра зависит от User-Agent. Это означает, что поведение этих модулей может различаться в разных браузерах с учетом текущего неофициального отраслевого стандарта.
Итак, повторюсь — здесь ничего нового. vh , vw , vmin , vmax , vb и vi остаются такими же, какими они были в спецификациях до изменения. Это обеспечивает обратную совместимость.
Большие и малые окна просмотра
Теперь все становится интереснее, когда мы переходим к большим и малым единицам измерения окна просмотра. Как следует из названия, эти единицы предъявляют особые требования к тому, как ПА должен изменять размер окна просмотра.
Для больших единиц области просмотра область просмотра должна быть рассчитана на максимально возможный размер области просмотра, при условии, что любой динамический пользовательский интерфейс браузера скрыт. Это позволяет разработчику заставлять свои проекты заполнять всю область просмотра, помня при этом, что пользовательский интерфейс браузера может перекрывать, по крайней мере, часть его.
Этот вариант большого окна просмотра начинается с lv* и включает lvh , lvw , lvmin , lvmax , lvb и lvi 9.
Для небольших окон просмотра все наоборот. В их случае размер области просмотра должен быть рассчитан с учетом расширения любого динамического интерфейса, что определяет наименьший возможный размер области просмотра. Это гарантирует, что дизайн разработчика заполнит всю область просмотра, когда интерфейс ПА будет развернут, и, возможно, оставят пустые места, когда пользовательский интерфейс скроется.
Этот небольшой вариант области просмотра начинается с sv* и включает svh , svw , svmin , svmax , svb 6 0 6 vi 900.
Динамическое окно просмотра
Наконец, есть также динамические процентные единицы области просмотра. Это позволит разработчикам использовать «историческое» поведение, когда размер области просмотра — и, следовательно, значения единиц измерения — зависят от того, расширен или свернут интерфейс браузера.
Хотя это означает больше контроля и выбора для разработчиков, этот вариант содержит предупреждение.
Использование может привести к смещению контента, что ухудшит UX. Другие вещи, которые следует учитывать, — это снижение производительности и возможные анимации во время пересчетов. Они могут либо улучшить, либо еще больше ухудшить UX, в зависимости от реализации UA.
Вариант динамического окна просмотра начинается с dv* и включает dvh , dvw , dvmin , dvmax , dvb 6 06vi 9.
Заключение
В целом, новые единицы измерения относительно области просмотра в спецификации означают, что разработчики имеют более точный контроль над решениями, которые они принимают о том, как их проекты должны вести себя по отношению к области просмотра их пользователей.
Однако с большой силой приходит и большая ответственность. Когда новые единицы в конечном итоге появятся в браузерах, для разработчиков это будет означать не только еще одну вещь, которую нужно контролировать, но и еще одну вещь, о которой нужно помнить. В то время как поставщики определенно сделают все возможное для разумного внедрения модулей, теперь для разработчиков будет еще важнее обеспечить и предоставить хороший пользовательский опыт, чем раньше.
Ваш интерфейс загружает ЦП ваших пользователей?
Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и т. д. для всех ваших пользователей в рабочей среде, попробуйте LogRocket.https://logrocket.com/signup/
LogRocket похож на DVR для веб-приложений и мобильных приложений, записывая все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить сеансы пользователей вместе с состоянием приложения, регистрировать сетевые запросы и автоматически отображать все ошибки.
Модернизируйте способы отладки веб-приложений и мобильных приложений — начните мониторинг бесплатно.
лучших практик использования модулей CSS · GitHub
Рекомендации по типам устройств для каждого типа носителя:
СМИ Рекомендуется Периодическое использование Нечастое использование Не рекомендуется
Экран см, бэр, % пикс. ch, ex, vw, vh, vmin, vmax см, мм, дюйм, пт, шт
Печать см, бэр, % см, мм, дюйм, пт, шт ч, бывший пикселей, vw, vh, vmin, vmax
Относительные единицы
Относительные единицы прекрасно работают как с экранными, так и с печатными носителями и должны наиболее часто используемые единицы CSS.
Блок Описание
% процентов относительно того же свойства родительского элемента
эм относительно размера шрифта элемента
рем относительно размера шрифта корневого элемента
ч относительно ширины глифа "0" (ZERO, U+0030) в шрифте элемента
бывший относительно x-высоты шрифта
Абсолютные единицы
Физические единицы измерения (например, см, мм, дюймы, пк и точки) следует использовать только для таблиц стилей печати, в то время как пиксели (px) должны использоваться только для экрана. Несмотря на то, что среди всех этих абсолютные единицы длины, в зависимости от устройства единицы CSS могут фактически означать разные вещи. Например, пока 1 см в CSS должен печататься как один физический сантиметр, нет гарантии, что 1 см в CSS даст один физический сантиметр на экране.
Блок Описание см мм в шт пт пикс.
см см 1 см 10 мм
мм мм 1/10 см 1 мм
в дюймов 2,54 см 25,4 мм 1 дюйм 6 шт. 72 точки 96px
шт. Пика 1/6 дюйма 1 шт. 12 точек 16 пикселей
точка 1/72 дюйма 1/12 шт. 1 часть 4/3px
пикселей пикселей 1/96 дюйма 1/16 шт. 3/4 точки 1 пиксель
Единицы области просмотра
Единицы длины окна просмотра в процентах следует использовать с осторожностью, так как все еще есть некоторые затяжные баги с их реализацией.
Блок Описание
фольксваген относительно 1% ширины области просмотра
вх относительно 1% высоты области просмотра
мин по отношению к 1% меньшего размера области просмотра
вмакс по отношению к 1% большего размера окна просмотра
Уровень документа
Предположим, что размер корневого шрифта равен 16px , но это не обязательно. Либо объявите размер шрифта как 100% , либо вообще не объявляйте свойство font-size .
HTML { размер шрифта: 100%; }
Бордюры
Скорее всего, используйте px , так как в большинстве случаев границу не нужно масштабировать.
.Компонент { нижняя граница: 1px сплошная #ccc; }
Размер шрифта
Размер шрифта следует применять только к минимально возможным дочерним элементам, чтобы свести к минимуму его каскадное воздействие на относительные единицы. Хотя оба следующих двух примера по существу эквивалентны, рекомендуется только первый.
DO :
.Компонент { } .Компонент-заголовок { размер шрифта: 1.2em; } .Компонент-тело { размер шрифта: 0.9em; }
НЕ :
.Компонент { размер шрифта: 1.2em; } .Компонент-заголовок { размер шрифта: 1em; } .Компонент-тело { размер шрифта: 0,75 em; }
Отступы и поля
Чтобы обеспечить единообразное использование пробелов во всем приложении, если компонент может использоваться в различных контекстах, может быть лучше использовать rem для полей и отступов, чем em .
.Компонент { поле: 1re 0; набивка: 1рем; }
Медиа-запросы
Используйте только em в определениях медиа-запросов, а не пиксели. Пока не появится более широкая поддержка rem в медиа-запросах, rem также следует избегать в медиа-запросах.
@media (минимальная ширина: 20em) { .Составная часть { цвет фона: синий; } }
Описание всех 24 единиц CSS Viewport
1 августа 2022 г.
Раньше в CSS было только четыре единицы области просмотра, которые вам нужно было знать, и они могли охватить почти все мыслимые варианты использования. Однако время шло и технологии менялись, и этих четырех единиц области просмотра уже не хватало для обработки всех вариантов использования. Из-за этого CSS добавил еще 20 единиц области просмотра, что звучит много, но они разбиты на шесть основных единиц области просмотра с тремя уникальными модификаторами, что дает нам в общей сложности 24 комбинации. В этой статье я разберу каждую из шести основных единиц области просмотра и трех модификаторов, чтобы вы могли уверенно использовать единицы области просмотра в любых ситуациях. Если вы предпочитаете учиться визуально, посмотрите видеоверсию этой статьи. Исходные четыре единицы области просмотра Основными единицами области просмотра CSS являются vw , vh , vmin и vmax . Скорее всего, вы использовали или видели эти устройства раньше, поэтому я постараюсь быть максимально кратким, объясняя их. vw 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.0028 НЕ показывает, что означает, что если вы установите элемент на 100lvh и строка URL показывает, что технически он будет больше экрана. Модификатор d
Модификатор d означает Динамический и представляет текущий размер области просмотра. Это как бы комбинация модификатора s и l . В нашем примере с мобильным телефоном это всегда будет размер текущего окна просмотра, независимо от того, отображается строка URL или нет. Если наша строка URL отображается, то 9Модификатор 0066 d имеет тот же размер, что и модификатор s , а если строка URL имеет значение , НЕ , показывающее, что модификатор d имеет тот же размер, что и модификатор l .
Во время перехода между отображаемой и скрытой строкой URL размер этого блока будет динамически масштабироваться, поэтому он всегда будет занимать все доступное пространство. Это здорово, если вам нужно гарантировать, что размер элемента всегда зависит от области просмотра, но это может быть утомительно, поскольку это вызовет много перерисовок, поскольку размер постоянно меняется.
Поддержка браузера
С каждой интересной функцией CSS вы всегда должны учитывать поддержку браузера, и, к сожалению, поддержка браузером этих новых единиц измерения области просмотра невелика. В настоящее время эти новые устройства поддерживаются на 15,2% и на самом деле поддерживаются только в Safari и Firefox. Причина отсутствия поддержки заключается в том, что это предложение все еще находится на стадии рабочего проекта, а это означает, что оно находится на очень ранней стадии своего жизненного цикла и весьма далеко от того, чтобы стать официальным CSS.
Вывод
Хотя 24 юнита может показаться большим, на самом деле это всего лишь шесть юнитов с тремя модификаторами, которые относительно просты. Эти простые комбинации, тем не менее, дают нам большие возможности для создания идеального макета CSS.
Единицы CSS
Для выражения длины доступны различные типы единиц CSS. В следующей таблице объясняются различные типы единиц CSS.
Относительные единицы.

Относительные единицы работают на основе длины родительского элемента. Применяемый элемент относительных единиц регулирует длину на основе длины родительского элемента. Родительским элементом может быть другой элемент или браузер.
эм
‘em’ — это размер шрифта. Это относится к размеру шрифта базового или родительского элемента.
%
Относится к размеру шрифта базового или родительского элемента.
рем
Относится к размеру шрифта корневого элемента (элемента HTML).
бывший
Текущая высота x шрифта. x-height равна высоте строчного символа «x».
ВВ
1 vw (ширина области просмотра), равная 1% ширины области просмотра. Viewport обозначает размер окна браузера.
вх
1 vh (высота области просмотра), равная 1% высоты области просмотра.
мин
1 vmin (минимум окна просмотра), равный 1% меньшей длины vw или vh.
вмакс
1 vmin (максимум окна просмотра), равный 1% большей длины vw или vh.
Абсолютные единицы.

Абсолютные единицы фиксированы. Он не корректируется на основе длины родительского элемента. Родительским элементом может быть другой элемент или браузер.
пикселей
пикселей. 1 пиксель равен 1/96 1 дюйма. Даже px — это абсолютная единица, это относительно устройства просмотра.
пт
балла. 1 пт равен 1/72 1 дюйма.
см
сантиметра.
в
Дюйм. 1 дюйм равен 2,54 см.
мм
миллиметра.
шт.
Пика. 1 шт равен 12 очкам (шт).
Схематический способ объяснить:
1) На следующей диаграмме показано, как система измеряет размер шрифта, высоту строки, базовую линию и высоту по оси x.
2) На следующей диаграмме показано, как система измеряет.
Различные устройства:
Веб-страницы можно просматривать с помощью различных типов устройств (мобильных телефонов, планшетов, ноутбуков, ПК). У каждого устройства высота и ширина могут быть разными. На веб-страницах лучше использовать относительные единицы (для использования на экране). Для целей печати можно использовать абсолютный размер.
Пример: Относительное и абсолютное поведение устройства в зависимости от размера экрана или изменения размера окна браузера.
<голова> Разница в относительных и абсолютных единицах CSS <стиль> тело { размер шрифта: 20 пикселей; } п { дисплей: встроенный блок; цвет фона: зеленый; белый цвет; отступы: 20 пикселей, 0 пикселей, 20 пикселей, 0 пикселей; } . infoОтносительный { ширина: 30%; } .infoDetailRelative { ширина:60%; } .infoАбсолют { ширина: 4,5 см; } .infoDetailAbsolute { ширина:9.3см; } <тело> <дел >
1) Имя:

Брейн Маккарти

СМИ	Рекомендуется	Периодическое использование	Нечастое использование	Не рекомендуется
Экран	см, бэр, %	пикс.	ch, ex, vw, vh, vmin, vmax	см, мм, дюйм, пт, шт
Печать	см, бэр, %	см, мм, дюйм, пт, шт	ч, бывший	пикселей, vw, vh, vmin, vmax

Блок	Описание
%	процентов относительно того же свойства родительского элемента
эм	относительно размера шрифта элемента
рем	относительно размера шрифта корневого элемента
ч	относительно ширины глифа "0" (ZERO, U+0030) в шрифте элемента
бывший	относительно x-высоты шрифта

Блок	Описание	см	мм	в	шт	пт	пикс.
см	см	`1 см`	`10 мм`
мм	мм	`1/10 см`	`1 мм`
в	дюймов	`2,54 см`	`25,4 мм`	`1 дюйм`	`6 шт.`	`72 точки`	`96px`
шт.	Пика			`1/6 дюйма`	`1 шт.`	`12 точек`	`16 пикселей`
	точка			`1/72 дюйма`	`1/12 шт.`	`1 часть`	`4/3px`
пикселей	пикселей			`1/96 дюйма`	`1/16 шт.`	`3/4 точки`	`1 пиксель`

Блок	Описание
фольксваген	относительно 1% ширины области просмотра
вх	относительно 1% высоты области просмотра
мин	по отношению к 1% меньшего размера области просмотра
вмакс	по отношению к 1% большего размера окна просмотра

	Относительные единицы.
	Относительные единицы работают на основе длины родительского элемента. Применяемый элемент относительных единиц регулирует длину на основе длины родительского элемента. Родительским элементом может быть другой элемент или браузер.
эм	‘em’ — это размер шрифта. Это относится к размеру шрифта базового или родительского элемента.
%	Относится к размеру шрифта базового или родительского элемента.
рем	Относится к размеру шрифта корневого элемента (элемента HTML).
бывший	Текущая высота x шрифта. x-height равна высоте строчного символа «x».
ВВ	1 vw (ширина области просмотра), равная 1% ширины области просмотра. Viewport обозначает размер окна браузера.
вх	1 vh (высота области просмотра), равная 1% высоты области просмотра.
мин	1 vmin (минимум окна просмотра), равный 1% меньшей длины vw или vh.
вмакс	1 vmin (максимум окна просмотра), равный 1% большей длины vw или vh.

	Абсолютные единицы.
	Абсолютные единицы фиксированы. Он не корректируется на основе длины родительского элемента. Родительским элементом может быть другой элемент или браузер.
пикселей	пикселей. 1 пиксель равен 1/96 1 дюйма. Даже px — это абсолютная единица, это относительно устройства просмотра.
пт	балла. 1 пт равен 1/72 1 дюйма.
см	сантиметра.
в	Дюйм. 1 дюйм равен 2,54 см.
мм	миллиметра.
шт.	Пика. 1 шт равен 12 очкам (шт).

<дел>
2) Имя:

Эрик Вуд

Результат:
1) При обычном размере окна браузера,
2) При уменьшении размера окна браузера,
Ниже приведены результаты различных единиц CSS:
Измерения CSS Выход
дел { ширина: 300 пикселей; размер шрифта: 25 пикселей; }
дел { ширина: 15%; размер шрифта: 1. 3em; }
дел { ширина: 8 см; размер шрифта: 10 мм; }
дел { ширина: 190pt; размер шрифта: 2,0 шт.; }
<тело> <дел >
Ширина тега div: 190pt

размер шрифта: 2.0pc

г.
Связанные темы:
Относительная единица измерения (vh, vw, vmax, vmin) Абсолютные единицы (pt, cm, in, mm, pc)

проценты, области просмотра, магия и лучшие практики
Веб-разработка |
Moritz
5 февраля 2021 г.
tl;dr краткое изложение
Добро пожаловать в нашу серию из четырех частей, посвященных модулям в CSS, где мы углубимся в каждый доступный модуль, объясним взаимосвязь между ними и попытаемся выяснить, когда его использовать. который. Мы поговорим о специальных возможностях, лучших практиках для команд разработчиков и истории изменения размеров элементов на экранах. В этой части мы поговорим о единицах измерения, основанных на процентах, таких как единицы области просмотра, магические числа и рекомендации по изменению размера.
В CSS довольно часто используется единица измерения %. В основном это интерпретируется как процентные доли того же свойства в родительском элементе. Таким образом, ширина: 66,66% сделает элемент шириной две трети его родительского элемента, а размер шрифта: 150% увеличит текущий установленный размер шрифта на 50%. Есть несколько причудливых исключений, например padding-top: 50% относится не к отступу родителя, а к его ширине. См. эту статью о злых частях CSS для получения дополнительной информации. .. Также, пожалуйста, не используйте их неправильно 🙏
Отступление: викторина-сюрприз!
Посмотрим, сможешь ли ты ответить на этот тест:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 *, *: до, *: после { box-sizing: граница-коробка; /* Если для вас это ничего не значит, прочтите здесь: https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ } тело { размер шрифта: 0.75rem; } заголовок { макс-ширина: 50rem; маржа: авто; } .лого { ширина: 25%; }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <голова> … <тело> <заголовок> Утилита Muffin Research Kitchen™️
Укажите в пикселях, какой ширины будет отображаться логотип для большинства пользователей на большом экране ?
Укажите в пикселях, какой ширины будет отображаться логотип для большинства пользователей на телефоне с шириной экрана 380 пикселей?
Укажите в пикселях, насколько большим будет текст в
под логотипом для большинства пользователей?
Ответы (нажмите, чтобы открыть):
1. Логотип будет иметь ширину 200 пикселей, что составляет одну четвертую от ширины 50 рем, что составляет 12,5 рем × 16 пикселей = 200 пикселей.
2. 95px. Заголовок будет использовать 100% ширины области просмотра, поэтому 25% × 380 пикселей = 95 пикселей.
3. 12px — потому что 0,75rem == 0,75 × размер шрифта по умолчанию, который равен 16px: 16 * 0,75 == 12
Хорошая работа! Если вы хотите продолжить расследование, вот ручка.
Единицы области просмотра
vw ( ширина области просмотра ) и vh ( высота области просмотра ) являются значениями в процентах (0–100) относительно области просмотра браузера (окна браузера, исключая пользовательский интерфейс). Таким образом, на экране телефона шириной 380 пикселей 50vw будет отображаться как 19.0px, независимо от контекста или родительских элементов. В настольных браузерах эти единицы относятся к внутренней части окна браузера (или, говоря языком javascript, к окну).
vmin и vmax равны либо vw, либо vh, в зависимости от того, какая сторона окна просмотра больше/меньше. Вы будете редко использовать их, но у CSS-Tricks есть хороший пример приложения.
Использование процентных значений, таких как 50% или 25vh, для ширины и высоты отлично подходит для удобочитаемости кода, поскольку сразу вызывает ощущение того, как элемент построен в дизайне. Если ваши значения становятся слишком неясными (6,25%, 56,25%, …), вы должны добавить комментарий («1/16» или «соотношение сторон 16:9»."). Что подводит нас к теме…
Магические числа
«Волшебные числа» (значения с необъяснимым значением, которые можно/нужно заменить именованными константами) — это кошмар настоящего разработчика™️ : из ниоткуда безымянный, некомментированный padding-left прыгает на вас и откусывает вам лицо!
Некоторые проектные группы справляются с этим, поддерживая гигантские файлы тем, где каждому отступу присваивается имя, которое в идеале (но на самом деле редко) используется повторно в нескольких местах. Таким образом, ваш padding-left: 2.25rem просто стал padding-left: ${theme.sizes.infoBoxLeftPadding}, и вы абсолютно уверены, что когда через несколько месяцев появится другой разработчик, он скажет: «Эй! дополнение в дизайне моего компонента, может быть, я могу просто использовать это повторно». Но позже изменение дизайна уменьшает левый отступ для их компонента, и внезапно ваша исходная работа выглядит по-другому. Супер...
Я думаю об этом так: CSS транслирует выбор дизайна (из холста дизайнера) в браузер. Этот выбор не всегда является результатом логического процесса, он может быть просто выражением вкуса и опыта в области эстетики, типографики, цвета и так далее. Хорошая работа разработчика CSS — различать объявления, достойные абстрагирования и глобального повторного использования, от локальных исключений и причуд красивого дизайна.
Ваши дизайнеры используют одинаковое соотношение размера шрифта и цветовую схему? Большой! Поместите их в файл темы и используйте описательные имена! Что еще более важно: заставьте всех в команде использовать эти имена, чтобы они использовались повторно. Сделайте хороший обзор всего этого в своем сборнике рассказов или в том, что вы используете.
Компонент был разработан с размером заголовка 1,25rem? Используют ли другие компоненты этот размер? Может быть, весь стиль шрифта (толщина, цвет, высота строки, межбуквенный интервал и т. д.) стоит абстракции для подкомпонента? Если ответ на все эти вопросы отрицательный, лично я просто пишу размер прямо в CSS этого компонента и не беспокоюсь о расширении файла темы. Для меня это не волшебное число, это просто выбор дизайна, с которым я должен — и могу — жить.
Однако в CSS есть магические числа! Часто вы хотите порадовать своего дизайнера и в итоге пишете что-то вроде left: 9% или ширина: calc(100% - 3.3rem) — значения, которые вы нашли методом проб и ошибок. Возможно, стоит подумать о том, чтобы сделать это по-другому. Если это невозможно, оставьте комментарий о том, как воспроизвести ваше решение для следующего разработчика.
Передовой опыт
Еще несколько (абсолютно субъективных) советов и приемов по изменению размеров в CSS:
Использование rem для большинства вещей стало обычной практикой, 1rem в основном будет отображаться как 16px (помните?). По этим причинам это хорошая идея для вашей проектной группы (дизайнеры и devs), чтобы указать, что ширина, длина, высота и размеры в файлах дизайна всегда должны быть кратны 4px, чтобы упростить преобразование rem. 4 достаточно мал, чтобы быть гибким, и достаточно велик, чтобы десятичные дроби не стали слишком сумасшедшими. Я признаю, что размеры шрифта, вероятно, потребуют более точной детализации, но для всего остального это также помогает визуальному балансу.
Для ширины границы/контура и других очень маленьких значений: используйте px, чтобы они были четкими, а не размытыми (подробнее об этом мы поговорим в части 4)
Если вам действительно нравится думать в px, а использование rem вызывает у вас затруднения, есть инструмент, который может помочь: pxtorem
Для типографики гармоничные шкалы шрифтов могут быть красивыми и облегчать расчеты для разработчиков!
Используйте сетку (предпочтительно сетку CSS) и позвольте сетке выполнять работу по позиционированию и изменению размеров.
Используйте em в медиа-запросах, так как он будет масштабировать ваши точки останова с помощью пользовательских настроек размера шрифта (rem тоже, но в Safari есть ошибки)
Для ширины и высоты попытайтесь найти подходящие, читаемые отношения, такие как 66% (две трети), 80vw (четыре пятых) и т. д.
Встроенные элементы (ссылки, кнопки, значки и т. д.) часто не имеют явного размера. Например, кнопка часто бывает такой большой, какой должна быть, в зависимости от ее текстового содержимого (внутреннего размера). В этом случае нам нужно беспокоиться только о размере шрифта и отступах.
Разработчики, поговорите со своими дизайнерами, чтобы узнать, почему они выбрали именно такой размер элемента!
Задача хорошего дизайнера — знать об ограничениях и поведении веб-платформы. Недостаточно сделать так, чтобы ваш дизайн хорошо выглядел на холсте эскиза, если позже разработчику придется угадывать, например, как расположить фоновое изображение. Будьте точны и старайтесь строить вокруг сеток и относительных значений.

Измерения CSS	Выход
дел { ширина: 300 пикселей; размер шрифта: 25 пикселей; }
дел { ширина: 15%; размер шрифта: 1. 3em; }
дел { ширина: 8 см; размер шрифта: 10 мм; }
дел { ширина: 190pt; размер шрифта: 2,0 шт.; }
<тело> <дел > Ширина тега div: 190pt размер шрифта: 2.0pc г.

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

Подробное объяснение единиц измерения CSS rem, em, vw, vh

1、em

2、rem

3. VW и VH

4. Vmin и Vmax

Интеллектуальная рекомендация

Развитие iOS — один случай

Разница между typeof, instanceof и конструктором в js

Установка и использование Cocoapods, обработка ошибок

Коллекция инструментов с неограниченной скоростью для облачного диска Baidu

Шаблон проектирования — Подробное объяснение шаблона заводского метода

Вам также может понравиться

29 сентября, весенняя облачная суббота

Logstash Delete Field.

Глава 2 2.1-2.16 Предварительный просмотр

Java фактическое боевое боевое издание 103 страниц Ответ

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

px, %, em, rem, vw, vh, vmin, vmax – Полезное для разработчика

Pixels

Percent

Ознакомиться подробнее с HTML и CSS можно тут:

Em

Ознакомиться подробнее с HTML и CSS можно тут:

Rem

Ознакомиться подробнее с HTML и CSS можно тут:

Ознакомиться подробнее с HTML и CSS можно тут:

Ознакомиться подробнее с HTML и CSS можно тут:

VW/VH

Смотреть видео:

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

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

Типографские единицы

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

Шрифтозависимые относительные единицы

Единицы области просмотра

Значения единиц измерения

Новые (и старые) единицы измерения в CSS, о которых вы никогда не слышали

Теперь немного конкретики

Соотношение сторон (Aspect ratio)

CSS length | TuHub

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

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

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

px

mm

cm

in

pt

pc

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

em

ex

ch

rem

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

vh

vw

vmin

vmax

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

Viewport units: vw, vh, vmin, vmax

Пример

Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»

Абсолютные величины

Физические единицы:

Визуальные единицы:

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

Процентные значения.

Единица измерения еm.

Единица измерения rеm.

Единица измерения еx.

Единица измерения ch.

Масштабируемые величины относительно экрана

Минимальное и максимальное значение области просмотра

Вопросы и задачи по теме

Единицы CSS — %, em, rem, px, vh, vw

HTML

HTML

HTML

`Динамическое окно просмотра`

`Заключение`

`Ваш интерфейс загружает ЦП ваших пользователей?`

`лучших практик использования модулей CSS · GitHub`

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

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

`Единицы области просмотра`

`Уровень документа`

`Бордюры`

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

`Отступы и поля`

`Медиа-запросы`

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