Css hv: Относительные единицы измерения vh, vw, vmin, vmax

em, px, pt, cm, in…

См. также оглавление со всеми советами.

На этой странице:

em, px, pt, cm, in…

Указывать длину в CSS можно в разных единицах. Некоторые из них
пришли из типографской традиции, как пункт (pt)
и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном
обиходе. Есть и «волшебная» единица, придуманная специально для
CSS: px. Значит ли это, что для разных свойств нужны
разные единицы?

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

Любые единицы измерения можно использовать где угодно. Свойство
со значением в пикселях (margin: 5px) также
допускает и значения в дюймах или сантиметрах (margin:
1.2in; margin: 0.5cm), и наоборот.

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

Соотношение между абсолютными единицами таково: 1in = 2.54cm =
25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность
своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm):
↑
72pt
↓

Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если
у устройства вывода достаточно высокое разрешение. На лазерном
принтере 1cm должен быть точно равен 1 сантиметру.
Но на устройствах низкого разрешения, вроде компьютерных экранов,
CSS этого не требует. И вправду, разные устройства и разные
реализации CSS норовят отобразить их по-разному. Лучше оставить эти
единицы для устройств высокого разрешения, в частности для печати.
На компьютерных экранах и мобильных устройствах может получиться
не то, что ожидалось.

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

CSS не уточняет, что именно понимается под «высоким
разрешением». Но так как у дешевых принтеров сегодня бывает
не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек
на дюйм, граница, скорее всего, проходит где-то между этими
значениями.

Еще одна причина не использовать абсолютные единицы где-либо,
кроме печати: на разные экраны мы смотрим с разного расстояния.
1 сантиметр на экране настольного компьютера выглядит маленьким.
Но на мобильном экране прямо перед глазами — это много. Лучше
вместо них использовать относительные единицы, напр. em.

Единицы em и ex зависят от размера
шрифта и могут быть свои для каждого элемента в документе. Единица
em — просто размер шрифта. В элементе, которому
задан шрифт в 2in, 1em и означает эти 2in. Указание размеров
(напр., для отступов) в em означает, что они
задаются относительно шрифта, и какой бы ни был шрифт
у пользователя — крупный (напр. на большом экране) или мелкий
(напр. на мобильном устройстве), эти размеры останутся
пропорциональными. Объявления наподобие text-indent:
1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются
размеры, которые должны отсчитываться от x-высоты шрифта.
X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов
с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв,
и если важно, чтобы какая-то картинка, например, соответствовала
x-высоте, единица ex к вашим услугам.

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

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

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

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

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

Используйте

em или px для шрифтов

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

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

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

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

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

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

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

Таким образом, единица px избавляет
от необходимости знать разрешение устройства. Независимо
от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или
1800 dpi), длина, указанная в виде целого числа px,
всегда выглядит хорошо и везде достаточно похоже. Но что, если
мы хотим узнать разрешение устройства, например, чтобы
решить, можно ли использовать линию в 0.5px?
Выход — проверить разрешение с помощью медиавыражений.
Подробности о медиавыражениях — за рамками этой статьи, но вот
небольшой пример:

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

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

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

p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }

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

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

position | htmlbook.ru

Краткая информация

Версии CSS

Описание

Устанавливает способ позиционирования элемента относительно окна браузера
или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

fixed

По своему действию это значение близко к absolute,
но в отличие от него привязывается к указанной свойствами left,
top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
Браузер Firefox вообще не отображает полосы прокрутки,
если положение элемента задано фиксированным, и оно не помещается целиком
в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но
они никак не влияют на позицию элемента.

relative

Положение элемента устанавливается относительно его исходного места. Добавление
свойств left, top,
right и bottom изменяет
позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

static

Элементы отображаются как обычно. Использование свойств left,
top, right и bottom
не приводит к каким-либо результатам.

inherit

Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div>
   <div>
     <img src="images/girl.jpg" alt="Девочка" />
   </div>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства position

Объектная модель

[window.]document.getElementById(«elementID»).style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

Скрипт CSS для USB Autoscope III • CHIPTUNER.RU

Скрипт CSS для USB Autoscope III

©Алексей Пахомов, (aka Is_18) Ижевск 

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

То же самое можно сказать и об альтернативных методиках диагностики двигателя. Они в большинстве случаев ускоряют и упрощают работу, но чтобы ими пользоваться, необходимо понять их и научиться применять. Далее речь пойдет о методиках, широко известных как тесты Андрея Шульгина, названные так по имени их автора, диагноста из украинского города Черновцы. Изначально они были созданы как дополнительные модули (скрипты) для мотортестера USB Autoscope, но позже были реализованы и в мотортестере MotoDoc.

Классическая методика диагностики в числе прочего предусматривает:

• проверку компрессии в каждом цилиндре;
• проверку свечей и катушек зажигания;
• тестирование топливных форсунок на стенде;
• контроль правильности установки распределительного вала;
• при необходимости установку УОЗ на холостом ходу и на повышенной частоте вращения;
• измерение противодавление катализатора. 

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

Говоря о тестах Андрея Шульгина, можно выделить две группы измерений: анализ информации, получаемой от датчика положения коленчатого вала и анализ информации, получаемой от датчика давления в цилиндре. 

Соответственно, существует два скрипта:

• CSS (CrankShaft Sensor)
• Рх.

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

Скрипт CSS

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

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

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

А теперь самое главное: имеющиеся дефекты того или иного рода проявляются на графике по-разному.  Чтобы понять, как и какие именно выводы можно сделать из графиков, рассмотрим несколько тезисов.

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

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

3.    Предположим наличие проблем в системе топливоподачи. Например, различна производительность форсунок вследствие их засорения. В этом случае график проблемного цилиндра (или цилиндров) окажется ниже остальных, вследствие более низкой эффективности работы из-за неоптимального состава смеси. Графики оставшихся цилиндров, наоборот, поднимутся в результате возросшей нагрузки на эти цилиндры. Следует заметить, что график работы дефектного цилиндра будет стабильным, без провалов ниже нуля (если нет одновременно проблем с системой зажигания). Именно так проявляют себя дефекты топливной системы в отличие от дефектов зажигания, возникающих спорадически либо под нагрузкой:

4.    Наконец, тест дает возможность оценить состояние механической части двигателя. Для этого нужно при работающем двигателе нажать на педаль акселератора до упора и, когда частота вращения вырастет до 3000 – 4000 rpm, выключить зажигание, не отпуская педаль акселератора.   Сразу после выключения зажигания частота вращения коленчатого вала начнет снижаться, но ещё какое-то время двигатель вращается по инерции, продолжая засасывать в цилиндры воздух и сжимать его. Искрообразования и подачи топлива при этом не происходит. В результате сжатый в цилиндре воздух после прохождения поршнем  ВМТ  работает подобно пружине, подталкивая коленчатый вал. Чем большее количество воздуха находится в цилиндре в этот момент, тем более сильный возникает толчок. Таким образом, рассчитанная эффективность в этом случае зависит только от состояния механической  части двигателя и не зависит ни от состояния системы зажигания, ни от состояния системы подачи топлива. В результате график проблемного цилиндра на конечном участке замедления будет расположен ниже остальных. Почему именно на конечном участке? Потому, что при достаточно высоких оборотах утечки воздуха из цилиндра сказываются меньше, чем при низких оборотах, когда вследствие медленного движения поршня возрастает время для возможных утечек: 

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

1.    Для считывания информации о скорости вращения двигателя необходимо подключить мотортестер к датчику вращения. Им может служить датчик положения коленчатого вала двигателя. Следует отметить, что точность измерения зависит от количества зубьев задающего диска: чем их больше, тем точнее измерение. По этой же причине датчиком вращения не может служить датчик на эффекте Холла, так как число импульсов на оборот коленчатого вала в подавляющем большинстве систем с такими датчиками будет недостаточным. В случае, когда необходимый датчик вращения отсутствует, в качестве такового можно использовать любой индуктивный датчик, поднесенный к венцу маховика, с которым при запуске двигателя контактирует стартер. Количество зубьев венца при этом не имеет значения: программа вычислит его сама. То же самое относится и к задающему диску двигателя: и количество зубьев, и пропуск зубьев будут определены автоматически. Очень важный момент заключается в том, что маховик, с которого считывается скорость вращения, должен быть жестко установлен на коленчатом валу. Ни распределительный, ни промежуточный валы в качестве источника информации не годятся, так как не имеют жесткой связи с коленчатым валом и соответственно, в осциллограмму будут внесены искажения.

2.    Для корректного отображения номеров цилиндров программе необходима привязка к первому цилиндру, а также информация об угле импульса привязки относительно ВМТ. Ее можно осуществить разными способами: используя высоковольтный датчик первого цилиндра, в случае системы COP – подключившись к первичной цепи катушки зажигания либо к управляющему импульсу, даже импульс форсунки или датчика положения распределительного вала можно использовать как источник информации о номере цилиндра. Но в этом случае нужно точно ввести угол опережения положительного фронта импульса по отношению к ВМТ первого цилиндра. Поэтому программа запросит угол опережения синхроимпульса относительно ВМТ. В том случае, если синхронизация осуществляется по импульсу высокого напряжения, необходимо задать первоначальный УОЗ, который чаще всего находится в пределах 0..15 градусов. Здесь не требуется высокая точность, +-10 градусов вполне достаточно.

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

Для выполнения теста необходимо подключить датчик положения коленчатого вала к первому каналу мотортестера, затем установить адаптер зажигания и датчик синхронизации по первому цилиндру. В списке пользовательских настроек выбрать CSS и включить запись данных. Запустить двигатель, плавно поднять частоту вращения примерно до 3000 об/мин и отпустить заслонку. Затем резко открыть дроссельную заслонку и, когда частота вращения достигнет 3000 – 4000 об/мин, выключить зажигание, удерживая заслонку открытой. В случае электронного дросселя можно воспользоваться другим способом, например, отключить форсунки.

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

Первая вкладка, которая возникнет в результате расчетов скрипта, это вкладка Report.

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

Вкладка Сжатие служит для оценки состояния дизельных двигателей.

Вкладка Опережение относительно ВМТ характеризует угол опережения зажигания относительно ВМТ. В большинстве современных систем управления двигателем зависимость УОЗ от частоты вращения носит очень сложный характер, и сделать какие-либо серьезные выводы можно лишь на двигателях, оснащенных механическим распределителем зажигания (трамблером).

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

• погнутые либо выбитые зубья;
• радиальное биение диска;
• слишком большой зазор между венцом и ДПКВ.

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

Фактически скрипт, получив осциллограмму датчика положения коленчатого вала, автоматически рассчитывает форму зубчатого венца и определяет его формулу. Чаще всего это формула 60 – 2, но может быть и 36 – 1, и 60 – 2‑2 и любая другая, даже без пропуска зубьев. Рассчитав форму венца, скрипт в дальнейшем начинает с ним работать.

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

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

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

EMMET шпаргалка для молниеносностной верстки

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>

<a href=""></a>

<a href="http://"></a> 

<a href="mailto:"></a>

<br />

<frame />

<link rel="stylesheet" href="" />

<link rel="stylesheet" href="style.css" />

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

<meta />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<style></style>

<script></script>

<script src=""></script>

<img src="" alt="" />

<img srcset="" src="" alt="" />

<img srcset="" src="" alt="" />

<map name=""></map>

<form action=""></form>

<label for=""></label>

<input type="text" /> 

<input type="text" name="" />

<input type="text" name="" />

<input type="search" name="" />

<input type="email" name="" />

<input type="url" name="" />

<input type="password" name="" /> 

<input type="datetime" name="" />

<input type="date" name="" />

<input type="time" name="" />

<input type="tel" name="" />

<input type="number" name="" />

<input type="color" name="" />

<input type="checkbox" name="" />

<input type="radio" name="" />

<input type="range" name="" />

<input type="file" name="" /> 

<input type="submit" value="" />

<input type="image" src="" alt="" />

<input type="button" value="" />

<input type="reset" value="" />

<select name=""></select>

<select name="" disabled="disabled"></select>

<option value=""></option>

<textarea name="" cols="30" rows="10"></textarea>

<marquee behavior="" direction=""></marquee>

<menu type="context"></menu>

<menu type="toolbar"></menu>

<video src=""></video>

<audio src=""></audio>

<html xmlns="http://www.w3.org/1999/xhtml"></html>

<keygen />

<command />

<button type="submit"></button>

<button type="reset"></button>

<button disabled="disabled"></button>

<blockquote></blockquote> 

<figure></figure>

<figcaption></figcaption>

<picture></picture>

<iframe src="" frameborder="0"></iframe>

<embed src="" type="" />

<object data="" type=""></object>

<caption></caption>

<colgroup></colgroup>

<fieldset></fieldset>

<button></button>

<optgroup></optgroup>

<textarea name="" cols="30" rows="10"></textarea>

<legend></legend>

<section></section>

<article></article>

<header></header>

<footer></footer>

<address></address>

<dialog></dialog>

<strong></strong>

<progress></progress>

<main></main>

<template></template>

<datagrid></datagrid>

<datalist></datalist>

<keygen />

<output></output>

<details></details>

<command />

<ol>
    <li></li>
</ol>

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

<dl>
    <dt></dt>
    <dd></dd>
</dl>

<map name="">
    <area shape="" coords="" href="" alt="" />
</map>

<table>
    <tr>
        <td></td>
    </tr>
</table>

<colgroup>
    <col />
</colgroup>

<tr>
    <td></td>
</tr>

<select name="">
    <option value=""></option>
</select>

<optgroup>
    <option value=""></option>
</optgroup>

<picture>
    <source srcset="" />
    <img src="" alt="" />
</picture>

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

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи
«Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, …)».

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

В этой статье мы рассмотрим относительные
и абсолютные единицы измерения, а также
единицы измерения области просмотра
(viewport-единицы).

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

Размеры в CSS можно указывать не только в абсолютных единицах, таких как пиксели, поинты или сантиметры, но и в относительных – в процентах, em или rem. Использование относительных единиц измерения также помогает придерживаться стандартов доступности.

В большинстве браузеров по умолчанию
установлен размер шрифта 16px. Это значение
можно использовать при расчетах
(например, 16px равны 1em, 1rem или 100%).

Давайте рассмотрим, какие же относительные
единицы измерения у нас есть.

• % – измерение в процентах.
• em – размер шрифта относительно
  обычного, т. е., если шрифт имеет
  размер 2.5em, значит, он в 2,5 раза больше
  обычного шрифта.
• rem – размер шрифта относительно
  корневого элемента документа.
• ch – ширина символа «0». В моноширинных
  шрифтах, где все символы имеют одинаковую
  ширину, 1ch это ширина одного символа.
• ex – x-высота текущего шрифта,
  измеряется в высоте символа «х» в нижнем
  регистре.

See the Pen
CSS Relative Units by Matthias (@fullstack-to)
on CodePen.

Чем отличаются em и rem?

Разница между этими единицами в
наследовании. Значение rem основывается
на корневом элементе (html). Каждый
дочерний элемент в качестве основы для
вычислений использует размер шрифта
элемента html.

А в единицах em вычисления основаны на
размере шрифта родительского
элемента.

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

Различные семейства шрифтов

Все представленные на картинке шрифты
имеют один размер (18pt), но благодаря
красной линии видно, что x-высота (ex) у
этих шрифтов разная.

На этой картинке шрифты имеют все тот
же одинаковый размер (18pt). Но они отличаются
шириной, т. е., их размер в единицах
ch будет разным. Символы моноширинных
шрифтов имеют одинаковую ширину, а в
serif или sans-serif символы отличаются по
ширине (например, «i» будет уже, чем «o»).

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

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

• cm – сантиметры. 1 cm = 1 cm
• mm – миллиметры. 10 mm = 1 cm
• in – дюймы (inches). 1 in = 96px = 2.54 cm
• px – пиксели. 1 px = 1/96 от 1 in
• pt – поинты (points). 1 pt = 1/72 от 1 in
• pc – пайки (пики, англ. pica). 1pc = 12 pt

See the Pen
CSS Absolute Units by Matthias (@fullstack-to)
on CodePen.

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

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

• vw – 1% от ширины области просмотра
  (50% это половина ширины области просмотра).
• vh – 1% от высоты области просмотра
  (50% это половина высоты области просмотра).
• vmin – 1% от меньшего размера
  ширины или высоты области просмотра
  (т. е., если ширина меньше высоты,
  то vmin рассчитывается от ширины, при
  этом 1 vmin = 1 vw).
• vmax – 1% от большего размера
  ширины или высоты области просмотра
  (т. е., если высота больше ширины,
  то vmax рассчитывается от высоты, при
  этом 1 vmax = 1 vh).

See the Pen
Viewport Units by Matthias (@fullstack-to)
on CodePen.

vmin и vmax могут изменяться в зависимости от изменения размера окна браузера или смены ориентации мобильного телефона.

единиц CSS

Единицы CSS

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

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

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

Пример

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

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

p {
font-size: 25px;
высота строки: 50 пикселей;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

— CSS: каскадные таблицы стилей

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

Примечание: Некоторые свойства допускают отрицательное значение s, а другие — нет.

Единицы

Единицы относительной длины

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

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

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

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

колпачок

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

шасси

Представляет ширину или, точнее, предварительную меру глифа «0» (ноль, символ Юникода U + 0030) в шрифте элемента .

В случаях, когда невозможно или непрактично определить размер символа «0», следует принять, что его ширина составляет 0,5 м на высоту 1 м.

выс.

Представляет рассчитанный размер шрифта элемента. Если используется в самом свойстве font-size , оно представляет унаследованных font-size элемента.

из

Представляет высоту по оси x шрифта элемента .В шрифтах с буквой «x» это обычно высота строчных букв шрифта; 1ex ≈ 0.5em во многих шрифтах.

ic

Равно использованной предварительной мере глифа «水» (идеограмма воды CJK, U + 6C34), найденного в шрифте, используемом для его визуализации.

слева

Равно вычисленному значению свойства line-height элемента, в котором оно используется, преобразованному в абсолютную длину.

рем

Представляет размер шрифта корневого элемента (обычно ).При использовании в корневом элементе font-size он представляет свое начальное значение (обычное значение по умолчанию для браузера 16px , но пользовательские настройки могут это изменить).

правый

Равно вычисленному значению свойства line-height корневого элемента (обычно ), преобразованному в абсолютную длину. При использовании в свойствах корневого элемента font-size или line-height , это относится к начальному значению свойств.

Длина окна просмотра в процентах

Процентная длина области просмотра определяет значение относительно размера области просмотра, то есть видимой части документа. Длины области просмотра недопустимы в блоках объявлений @page .

vh

Равно 1% высоты исходного содержащего блока области просмотра.

VW

Равно 1% ширины исходного содержащего блока области просмотра.

vi

Равно 1% от размера исходного содержащего блока в направлении встроенной оси корневого элемента.

vb

Равно 1% от размера исходного содержащего блока в направлении оси блока корневого элемента.

vmin

Равно меньшему из vw и vh .

vmax

Равно большему из vw и vh .

Единицы абсолютной длины

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

Для устройств с низким dpi единица пикселей представляет физический опорный пиксель ; другие единицы определены относительно него.Таким образом, 1 из определяется как 96 пикселей , что равно 72 пикселя . Следствием этого определения является то, что на таких устройствах размеры, описанные в дюймах ( из ), сантиметрах ( см ) или миллиметрах ( мм ), не обязательно соответствуют размеру физического устройства с таким же именем. .

Для устройств с высоким dpi дюймы ( на ), сантиметры ( см, ) и миллиметры ( мм, ) совпадают с их физическими аналогами.Следовательно, относительно них определяется блок пикселей (1/96 1 дюйма).

Примечание: Многие пользователи увеличивают размер шрифта своего пользовательского агента по умолчанию, чтобы текст был более разборчивым. Абсолютные длины могут вызвать проблемы с доступностью, поскольку они фиксированы и не масштабируются в соответствии с пользовательскими настройками. По этой причине предпочтение относительной длины (например, em или rem ) при установке font-size .

пикселей

Один пиксель.Для экранных дисплеев он традиционно представляет собой один пиксель устройства (точку). Однако для принтеров и с экранами высокого разрешения один пиксель CSS подразумевает несколько пикселей устройства. 1px = 1/96 от 1 дюйм .

см

Один сантиметр. 1 см = 96 пикселей / 2,54 .

мм

Один миллиметр. 1 мм = 1/10 от 1 см .

Q

Одна четверть миллиметра. 1 квартал = 1/40 от 1 см .

дюйм

Один дюйм. 1 дюйм = 2,54 см = 96 пикселей .

шт

Одна пик. 1 шт. = 12 пунктов = 1/6 от 1 дюйм .

пт

Одно очко. 1pt = 1/72 часть 1 дюйм .

mozmm ​​, удалено в Firefox 59

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

При анимации значения типа данных интерполируются как действительные числа с плавающей запятой. Интерполяция происходит по рассчитанному значению. Скорость интерполяции определяется функцией синхронизации, связанной с анимацией.

Сравнение единиц длины

Следующая демонстрация предоставляет вам поле ввода, в которое вы можете ввести значение (например.грамм. 300px , 50% , 30vw ), чтобы установить ширину панели результатов, которая появится под ней после нажатия Return .

Это позволяет сравнивать и противопоставлять эффект различных единиц длины.

HTML

  

  

     Введите ширину: 
    
  
  


  


  

CSS

  html {
  семейство шрифтов: без засечек;
  font-weight: жирный;
  размер коробки: рамка-рамка;
}

.external {
  ширина: 100%;
  высота: 50 пикселей;
  цвет фона: #eee;
  положение: относительное;
}

.внутренний {
  высота: 50 пикселей;
  цвет фона: # 999;
  box-shadow: вставка 3px 3px 5px rgba (255,255,255,0,5),
              вставка -3px -3px 5px rgba (0,0,0,0.5);
}

.результат {
  высота: 20 пикселей;
  цвет фона: # 999;
  box-shadow: вставка 3px 3px 5px rgba (255,255,255,0,5),
              вставка -3px -3px 5px rgba (0,0,0,0.5);
  цвет фона: оранжевый;
  дисплей: гибкий;
  align-items: center;
  маржа сверху: 10 пикселей;
}

.result code {
  позиция: абсолютная;
  маржа слева: 20 пикселей;
}

.полученные результаты {
  маржа сверху: 10 пикселей;
}

.input-container {
  позиция: абсолютная;
  дисплей: гибкий;
  justify-content: гибкий старт;
  align-items: center;
  высота: 50 пикселей;
}

метка {
  маржа: 0 10px 0 20px;
}  

JavaScript

  константа inputDiv = document.querySelector ('. Inner');
const inputElem = document.querySelector ('ввод');
const resultsDiv = document.querySelector ('. результаты');

inputElem.addEventListener ('изменить', () => {
  inputDiv.style.width = inputElem.value;

  const результат = документ.createElement ('div');
  result.className = 'результат';
  result.style.width = inputElem.value;
  result.innerHTML = ` width: $ {inputElem.value} `;
  resultsDiv.appendChild (результат);

  inputElem.value = '';
  inputElem.focus ();
})  

Результат

таблиц BCD загружаются только в браузере.

CSS Viewport Units: A Quick Start

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

Единицы и их значение

В CSS есть четыре модуля на основе области просмотра. Это vh , vw , vmin и vmax .

• Высота видового экрана (vh). Эта единица измерения зависит от высоты области просмотра. Значение 1vh равно 1% высоты области просмотра.
• Ширина области просмотра (vw).Эта единица измерения зависит от ширины области просмотра. Значение 1vw равно 1% ширины области просмотра.
• Минимум области просмотра (vmin). Этот блок основан на меньшем размере окна просмотра . Если высота области просмотра меньше ширины , значение 1vmin будет равно 1% от высоты области просмотра. Аналогично, если ширина области просмотра меньше высоты , значение 1vmin будет равно 1% ширины области просмотра.
• Максимум области просмотра (vmax). Этот блок основан на увеличенном размере окна просмотра . Если высота области просмотра больше ширины , значение 1vmax будет равно 1% высоты области просмотра. Аналогично, если ширина области просмотра больше высоты , значение 1vmax будет равно 1% ширины области просмотра hte.

Посмотрим, какой будет стоимость этих единиц в разных ситуациях:

• Если область просмотра имеет ширину 1200 пикселей и высоту 1000 пикселей, значение 10vw будет 120 пикселей, а значение 10vh будет 100 пикселей.Поскольку ширина области просмотра больше, чем ее высота, значение 10vmax будет 120 пикселей, а значение 10vmin будет 100 пикселей.
• Если теперь повернуть устройство так, чтобы область просмотра стала шириной 1000 пикселей и высотой 1200 пикселей, значение 10vh будет 120 пикселей, а значение 10vw будет 100 пикселей. Интересно, что значение 10vmax по-прежнему будет 120 пикселей, потому что теперь оно будет определяться на основе высоты области просмотра. Точно так же значение 10vmin все равно будет 100 пикселей.
• Если вы измените размер окна браузера так, чтобы область просмотра стала шириной 1000 пикселей и высотой 800 пикселей, значение 10vh станет 80 пикселей, а значение 10vw станет 100 пикселей. Аналогично, значение 10vmax станет 100 пикселей, а значение 10vmin станет 80 пикселей.

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

Как видите, ширина первого дочернего элемента установлена ​​равной 80% ширины его родительского элемента. Однако второй дочерний элемент имеет ширину 80vw, что делает его шире, чем его родительский.

Применение единиц просмотра

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

Полноэкранные фоновые изображения или разделы

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

В качестве примера возьмем следующий HTML-код:

  

  
 а 


  

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

  .fullscreen {
  ширина: 100%;
  высота: 100вх;
  обивка: 40vh;
}

.a {
  фон: url ('path / to / image.jpg') center / cover;
}
  

И первое, и второе изображение взяты с Pixabay.

Создавайте идеально подходящие заголовки

Плагин FitText jQuery можно использовать для масштабирования заголовков таким образом, чтобы они занимали всю ширину родительского элемента. Как мы упоминали ранее, значение единиц области просмотра изменяется непосредственно в зависимости от размера области просмотра. Это означает, что если вы используете единицы просмотра, чтобы установить размер шрифта для заголовков, они идеально впишутся на экран.При изменении ширины области просмотра браузер также автоматически масштабирует текст заголовка соответствующим образом. Единственное, что вам нужно сделать, это определить правильное начальное значение для font-size с точки зрения единиц области просмотра.

Одна из основных проблем с установкой font-size таким образом заключается в том, что размер текста будет сильно различаться в зависимости от области просмотра . Например, font-size из 8vw будет вычисляться примерно до 96 пикселей для ширины области просмотра 1200 пикселей, 33 пикселей для ширины области просмотра 400 пикселей и 154 пикселей для ширины области просмотра 1920 пикселей.Это может сделать шрифт слишком большим или слишком маленьким для правильного чтения. Вы можете узнать больше о правильном изменении размера текста с помощью комбинации единиц вместе с функцией calc () в этой отличной статье о типографике на основе единиц просмотра.

Простое центрирование элементов

Единицы

Viewport могут быть очень полезны, когда вы хотите поместить элемент точно в центр экрана вашего пользователя. Если вы знаете высоту элемента, вам просто нужно установить верхнее и нижнее значение свойства margin равным [(100 - height) / 2] vh :

.

 .centered {
  ширина: 60вв;
  высота: 70vh;
  наценка: 15вх авто;
}
  

Однако в настоящее время мы можем использовать Flexbox или CSS Grid для центрирования элементов как по вертикали, так и по горизонтали.

О чем нужно помнить

Если вы решите использовать единицы просмотра в своих проектах, вам следует помнить о нескольких вещах.

Будьте осторожны при установке ширины элемента с помощью единиц просмотра. Это связано с тем, что, когда для свойства overflow корневого элемента установлено значение auto , браузеры будут предполагать, что полосы прокрутки не существуют.Это сделает элементы немного шире, чем вы ожидаете. Рассмотрим разметку с четырьмя элементами div со следующим стилем:

  div {
  высота: 50vh;
  ширина: 50вв;
  плыть налево;
}
  

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

Установка ширины div от 50vw до 50% решит эту проблему. Вывод таков: следует использовать проценты при установке ширины для элементов блока , чтобы полосы прокрутки не мешали вычислению их ширины.

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

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

Судя по данным, доступным на Caniuse, кажется, что все основные браузеры поддерживают эти устройства. Однако есть еще несколько ошибок и проблем, о которых следует знать при использовании единиц просмотра. Например, в Firefox есть задокументированная ошибка, при которой 100vh не влияет ни на один элемент с его свойством display , установленным на table . Опять же, Chrome не поддерживает единицы просмотра для ширины границ, промежутков между столбцами, значений преобразования, теней блоков или в calc () до версии 34.Посетите Caniuse для получения полного списка известных ошибок.

Заключение

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

Поднимите свои навыки CSS на новый уровень с помощью нашей книги «Мастер CSS, 2-е издание» Тиффани Б. Браун, в которой рассматриваются CSS-анимации, переходы, преобразования и многое другое.

CSS em, rem, vh, vw и другие, объяснено

Единицы

Многие свойства CSS, такие как ширина , поле , отступ , font-size и т. Д., Принимают длину. В CSS есть способ выразить длину в нескольких единицах. Длина — это комбинация числа и единицы без пробелов. Например. 5px , 0.9em и т. Д.

Длина

Единицы общей длины

CSS использует несколько единиц для выражения длины.Старые версии, поддерживаемые всеми браузерами:

• rem — «r» означает «root»: «root em» — что равно размеру шрифта, установленному для корневого элемента (почти всегда ).
• vh и vw — Многие методы адаптивного веб-дизайна в значительной степени полагаются на процентные правила. Однако процентные показатели CSS не всегда являются лучшим решением всех проблем. Размер vh равен 1/100 высоты области просмотра.Так, например, если высота браузера составляет 800 пикселей, 1vh равняется 8 пикселей и, аналогично, если ширина области просмотра составляет 650 пикселей, 1vw эквивалентно 6,5 пикселей.
• vmin и vmax — Эти единицы связаны с максимальным или минимальным значением vh и vw . Например, если ширина браузера установлена ​​на 1200 пикселей, а высота — 600 пикселей, 1vmin будет 6 пикселей, а 1vmax будет 12 пикселей. Однако, если ширина была установлена ​​на 700 пикселей, а высота установлена ​​на 1080 пикселей, vmin будет равно 7px, а vmax 10.8 пикселей.
• ex и ch — Эти единицы, аналогичные em и rem , зависят от текущего шрифта и размера шрифта. Однако, в отличие от em и rem , эти единицы также полагаются на семейство шрифтов , поскольку они определяются на основе мер, специфичных для каждого шрифта. Единица ch («символьная единица») определяется как ширина нулевого символа («0»).Единица ex определяется как «текущая высота x текущего шрифта или половина 1em». Высота-x данного шрифта — это высота строчной буквы «x» этого шрифта. Часто это средний знак шрифта.

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

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

Относительные единицы изменяются относительно текущего размера шрифта элемента или других настроек. Некоторые относительные единицы:

em

• ширина заглавной буквы M font-size текущего элемента.
• Размеры шрифта наследуются от родительских элементов.

Пример:

  div {
размер шрифта: 16 пикселей;
}
div h4 {
размер шрифта: 2rem;
}  

Здесь

будет равно 32px , поскольку размер шрифта текущего или родительского элемента равен 16px .

rem

• root em , или ширина заглавной буквы M по умолчанию font-size .
• Размеры родительского шрифта не действуют.

Пример:

  кузов {
размер шрифта: 16 пикселей;
}
п {
размер шрифта: 1,5 бэр;
}  

Здесь

будет равно 24px , поскольку базовый размер шрифта по умолчанию равен 16px .

%

• процентный размер по отношению к размеру родителя.

Пример:

  div {
ширина: 400 пикселей;
}
div p {
ширина: 75%;
}  

Поскольку ширина родительского элемента равна 400 пикселей , ширина внутреннего парграфа будет 300 пикселей , или 75% от 400 пикселей .

vw

• ширина обзора, или 1/100 ширины окна просмотра

Пример:

  body {
ширина: 100ввт;
}  

Тело заполняет ширину области просмотра, будь то 417 пикселей, 690 пикселей или любая другая ширина.

vh

• высота обзора, или 1/100 высоты окна просмотра

Пример:

  div {
высота: 50vh;
}  

Этот div заполнит половину высоты области просмотра, будь то 1080 пикселей, 1300 пикселей или любая высота.

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

Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Некоторые абсолютные единицы:

пикселей

• пикселей

Количество пикселей

• относительно качества экрана устройства просмотра

дюймов , см , мм

• дюймов,

миллиметров

• дюйм — это дюйм на маленьком или большом экране

pt , pc

• точки (1/72 дюйма) и picas (12 точек)

Пример

  p {
  размер шрифта: 24 пикселя;
}
div {
  ширина: 3 дюйма;
  ширина границы: 3pt;
}  

Абзац с размером шрифта : 24px будет отображаться как 24px на экране телефона, планшета или рабочего стола.

div будет отображаться как 3 дюйма в ширину, а граница на div будет иметь толщину 3/72 дюйма, независимо от размера экрана.

В чем разница между PX, EM, REM,%, VW и VH?

При проектировании с помощью Elementor вы можете заметить, что у некоторых элементов есть параметры для выбора размера, позволяющие выбрать PX, EM, REM,%, VW, или VH . Но что на самом деле означают эти параметры и когда следует использовать один вместо другого?

Начнем с основ.

В CSS вы можете указать размеры или длину элементов, используя различные единицы измерения. Единицы измерения, которые вы найдете в некоторых вариантах Elementor, включают PX, EM, REM,%, VW и VH , хотя в CSS доступно несколько других. Не каждый элемент Elementor предлагает все эти единицы. Elementor представляет только те параметры, которые наиболее подходят для данного элемента.

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

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

PX : пиксели (пиксели) считаются абсолютными единицами, хотя они относятся к DPI и разрешению устройства просмотра. Но на самом устройстве блок PX зафиксирован и не меняется ни на каком другом элементе. Использование PX может быть проблематичным для отзывчивых сайтов, но они полезны для поддержания согласованного размера некоторых элементов. Если у вас есть элементы, размер которых нельзя изменять, то хорошим выбором будет использование PX.

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

EM : относительно родительского элемента

REM : относительно корневого элемента (тег HTML)

% : относительно родительского элемента

VW : относительно ширины окна просмотра

VH : относительно высоты окна просмотра

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

Рассмотрим простой пример.

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

Итак, что означают эти единицы при работе со значением по умолчанию 16 пикселей?

Указанное вами число умножит это число на размер по умолчанию.

1em = 16 пикселей (1 * 16)

2em = 32 пикселя (2 * 16)

. 5em = 8 пикселей (0,5 * 16)

1рем = 16 пикселей

2rem = 32 пикселя

.5rem = 8 пикселей

100% = 16 пикселей

200% = 32 пикс.

50% = 8 пикселей

Хорошо, отлично, но что, если вы или пользователь измените размер по умолчанию? Поскольку это относительные единицы, окончательные значения размера будут основаны на новом базовом размере.Хотя значение по умолчанию — 16 пикселей, если вы или пользователь измените его на 14 пикселей, тогда рассчитанные размеры будут равны:

.

1em = 14 пикселей (1 * 14)

2em = 28 пикселей (2 * 14)

. 5em = 7 пикселей (0,5 * 14)

1рем = 14 пикселей

2rem = 28 пикселей

.5rem = 7px

100% = 14 пикселей

200% = 28 пикселей

50% = 7 пикселей

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

В чем разница между EM и REM?

Глядя на диаграмму выше, видно, что EM и REM выглядят совершенно одинаково. Так чем же они отличаются?

Проще говоря, они различаются по наследству. Как уже упоминалось, REM основан на корневом элементе (HTML). Каждый дочерний элемент, использующий REM, будет затем использовать корневой размер HTML в качестве точки вычисления, независимо от того, заданы ли для родительского элемента какие-либо другие размеры.

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

Так что насчет%, VW и VH? О чем они все?

В то время как PX, EM и REM в основном используются для изменения размера шрифта,%, VW и VH в основном используются для полей, отступов, интервалов и ширины / высоты.

Повторюсь, VH означает «высота области просмотра», которая является видимой высотой экрана. 100VH будет представлять 100% высоты области просмотра или полную высоту экрана. И, конечно же, VW означает «ширина области просмотра», то есть видимая ширина экрана. 100VW будет представлять 100% ширины области просмотра или полную ширину экрана. % отражает процентную долю размера родительского элемента, независимо от размера области просмотра.

Давайте посмотрим на несколько примеров, когда Elementor предоставляет параметры%, VW и VH.

Ширина столбца : Если вы редактируете макет столбца Elementor, вы заметите, что доступна только одна единица измерения ширины -%. Ширина столбцов работает хорошо и гибко только при использовании процентов, поэтому других вариантов не предусмотрено.

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

Padding : заполнение раздела может быть указано в PX, EM или%. Как и в случае с полями, часто предпочтительнее использовать либо EM, либо%, чтобы отступы оставались относительными по мере увеличения размера страницы.

Размер шрифта : если вы измените типографику элемента, например заголовка, вы увидите четыре варианта: PX, EM, REM и VH

.

Вы когда-нибудь создавали большой заголовок и восхищались тем, как хорошо он выглядит на настольном компьютере, только чтобы понять, что он слишком велик на мобильном устройстве? (Признание вины: неоднократно).

Ключом к элегантному решению этой проблемы является использование EM, REM или VW вместо PX. Что вы выберете, зависит от вашей конкретной ситуации. Я обычно выбираю EM, потому что хочу, чтобы размер был относительно родительского заголовка. Но если вы предпочитаете, чтобы размер был относительно размера корня (HTML), выберите вместо этого REM. Или вы можете установить его относительно ширины области просмотра (VW), если это лучше для вашего случая.

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

Подробнее о VW и VH

Единицы окна просмотра представляют собой процент от текущего окна просмотра браузера (текущий размер браузера). Хотя это похоже на единицы измерения%, есть разница. Единицы области просмотра рассчитываются как процент от текущего размера области просмотра браузера. С другой стороны, процентные единицы рассчитываются как процент от родительского элемента, который может отличаться от размера области просмотра.

Рассмотрим пример области просмотра мобильного экрана размером 480 x 800 пикселей.

1 VW = 1% ширины области просмотра (или 4,8 пикселя)

50 VW = 50% ширины области просмотра (или 240 пикселей)

1 VH = 1% высоты окна просмотра (или 8 пикселей)

50 VH = 50% высоты области просмотра (или 400 пикселей)

Если размер области просмотра изменяется, размер элемента изменяется соответственно.

Когда следует использовать одно устройство вместо другого?

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

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

REM относительно размера шрифта корневого (HTML), поэтому, если вы хотите масштабировать размер элемента на основе размера корня, независимо от размера родительского элемента, используйте REM. Если вы использовали EM и обнаружили проблемы с размером из-за большого количества вложенных элементов, REM, вероятно, будет лучшим выбором.

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

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

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

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

vh & vw — Шеннон Крабилл — инженер-программист переднего плана

Если вы похожи на меня, вы, вероятно, иногда заглядываете в исходный код веб-сайта. Я делаю это, когда мне интересно, как организована страница, используется ли фреймворк или мне интересно, как элемент был стилизован с помощью CSS.

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

Во-первых, что означает v ?

🤔

В для Viewport

Оказывается, v означает viewport .Область просмотра в веб-дизайне — это область веб-страницы или приложения, которая в настоящее время видна пользователю на устройстве. Вы можете подумать, что область просмотра совпадает с общей длиной и / или шириной веб-сайта, но это не так.

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

Сложенная газета на столе с кофе и выпечкой. Фотография Good Good Good на Unsplash

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

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

Итак, v обозначает окно просмотра, а что насчет других букв?

Сюрприз!

h и w in vh и vw обозначают высоту и ширину соответственно.Собирая все это вместе, мы получаем vh для высоты окна просмотра и vw для ширины окна просмотра . Прохладный!

Теперь, когда мы знаем, что они означают и как их использовать?

Использование единиц просмотра

vh и vw — относительных единиц, введенных в CSS3. Один (один) vh или vw представляет собой процент от высоты или ширины области просмотра этого устройства. На примере мобильного телефона, если ширина области просмотра составляет 450px , половину этой ширины можно указать как 50vw , что равно 225px .Чтобы стилизовать элемент как 225px шириной на настольном компьютере с шириной области просмотра 900px , мы должны указать его как 25vw в CSS.

Хорошо, теперь, когда мы знаем блоки vh и vw , значения которых определяются окном просмотра, почему бы не использовать % ?

Процент относительно высоты и ширины видового экрана

Хотя верно, что vh / vw и % являются относительными единицами, диапазон относительных конечных значений от до отличается.В случае % значение равно относительно его родительского элемента . Для vh / vw значение всегда относится к области просмотра устройства. Приведем небольшой пример.

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

Для каждого элемента раздела установка свойства width на 50% или 50vw дает одинаковый визуальный результат.Для дочернего элемента помимо элемента значения ширины отличаются.

В первом примере , за исключением , вдвое меньше его родительского элемента, то есть вдвое меньше его родительского элемента. Визуально это то, что мы хотим. В примере 2 указание дочернего элемента как 50vw заполняет ширину его родительского элемента, которая вдвое меньше ширины области просмотра. Чтобы получить дочерний элемент половинной ширины, как в первом примере, используя vw , ему потребуется значение 25vw , как в 3-м примере.

См. Перо
Процент против ширины области просмотра, пример Шеннон Крабилл (@scrabill)
на CodePen.

Сводка

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

Ресурсы

Связанные

Использование единиц просмотра CSS (vw, vh …) для размеров шрифта может быть непростым

Модули

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

Но каковы последствия масштабирования всего, используя простые единицы просмотра?

Пример

Рассмотрим эту простую веб-страницу, отображаемую в окне просмотра шириной 1440 пикселей.

В этом примере размер шрифта определяется в корне документа с использованием vw , а все остальные элементы используют rem в качестве единицы длины, что в основном переводится как «использовать размер шрифта, определенный для для определения размера x «.Таким образом, размеры большинства элементов на странице напрямую связаны с размером шрифта из .

  html {
  размер шрифта: 1.5vw;
}

[...]

main> h2 {
  дисплей: встроенный блок;
  размер шрифта: 1,75 бэр;
  набивка: 1 бэр;
  цвет фона: черный;
  цвет белый;
}

main> p {
  размер шрифта: 1 бэр;
  высота строки: 1,25 бэр;
  обивка-дно: 1 бэр;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Исключение из правила, размер нашего основного контейнера содержимого равен vw , поэтому он всегда занимает 60% ширины области просмотра.

  main {
  ширина: 60вв;
  маржа: авто;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Вот та же веб-страница, отображаемая в области просмотра шириной 960 пикселей.

И снова во вьюпорте шириной 4800 пикселей.

Проблема №1: функция масштабирования браузера больше не работает

Чтобы смоделировать различные размеры области просмотра, я просто использовал функцию увеличения / уменьшения масштаба Firefox.Хотя это доказало мою точку зрения о том, что все масштабируется без проблем, оно также высветило одну серьезную проблему: пользователь больше не может увеличивать текст, увеличивая масштаб!

Это, конечно, проблема удобства использования / доступности, которую мы хотим предотвратить. Такое поведение может быть «несколько хорошо» , хотя, если каждая отдельная часть копии на экране очень большая, что здесь не так.

Проблема № 2: изменение размера окна браузера влияет на удобочитаемость

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

Представьте себе на экране ноутбука 13 дюймов:

Это еще более проблематично, учитывая, что масштабирование браузера больше не работает!

Проблема №3: ​​на большом экране текст будет выглядеть массивно

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

Что ж, это будет выглядеть точно так, как показано на скриншоте, но на массивном 32-дюймовом экране, со слишком большими символами и 19 контейнером содержимого.2 дюйма шириной! Если мы не хотим, чтобы некоторые из наших посетителей выглядели так, как будто они смотрят теннис, когда они читают наш контент, мы можем избежать этого.

Решение: на помощь приходят медиа-запросы!

В этом примере единственное место, где мы даем прямое значение font-size , — это определение стиля . Это очень удобно, потому что тогда мы могли бы просто использовать rem везде, чтобы ссылаться на этот font-size и масштабировать все, но это как раз и является причиной проблем, описанных выше.

Что, если нам нужна некоторая масштабируемость, но при этом убедиться, что контент по-прежнему читается почти во всех случаях, при этом функция масштабирования работает?

Первое, что мы могли бы сделать, это добавить медиа-запросов в , чтобы изменить значение font-size на основе различных параметров: текущая ширина области просмотра, высота области просмотра больше ширины области просмотра и т. Д.
Для этого мы могли бы использовать vw , vh или даже vmax , и это, вероятно, сработает и обеспечит очень плавное масштабирование.Я лично предпочитаю писать меньше (и более простых) медиа-запросов, используя пикселей для размеров шрифта: используя здесь набор абсолютных значений вместо единиц окна просмотра, мне не нужно учитывать случаи, когда высота больше ширины, например.

Давайте изменим способ обработки в нашем примере font-size :

  html {
  размер шрифта: 24 пикселя;
}

@media (max-width: 1921px) {
  html {
    размер шрифта: 22 пикселя;
  }
}

@media (max-width: 1441px) {
  html {
    размер шрифта: 20 пикселей;
  }
}

@media (max-width: 1025 пикселей) {
  html {
    размер шрифта: 18 пикселей;
  }
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

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

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

  main {
  ширина: 60%;
  максимальная ширина: 70 каналов;
  маржа: авто;
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Используя max-width: 70ch , я говорю браузеру : «Я хочу, чтобы