Измерительные единицы часто употребляются на web-страницах. Они могут быть как на самой HTML-страничке так и в Таблице стилей (CSS). Цифры всегда сопровождаются названием единиц измерения. Но если мы используем атрибут width, то можно не указывать единицу измерения, а просто написать числовое значение. Оно автоматически будет приниматься за логические точки экрана (пиксели). Все единицы измерения разные, их нужно писать слитно, не должно быть никаких пробелов, никакого расстояния между числом и единицей измерения.
Единицы измерения и их типы
Единицы, в вебе, делятся на 2 типа: абсолютные и относительные. На всех сайтах используются единицы измерения. Без них невозможно.
Относительные:
em
em (высота шрифта данного элемента) или текущий размер шрифта. Размеры в em – относительные, они определяются по текущему контексту.
Пример:
<div style="font-size:1.5em"> Страусы <div style="font-size:1.5em">Живут также в Африке</div> </div>
Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая. Выходит, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
ex
ex (высота буквы «X» в данном шрифте)
px
px (пиксель, pixel) – логическая точка экрана. Пиксель px – это самая базовая, абсолютная и окончательная единица измерения. Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели. Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333…px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
%
% (процент) – значения, зависимые от определенной среды, например, от ширины экрана.
Какие единицы измерения использовать решает разработчик. Лично я в своей практики использую в основном пиксели и проценты, а для обозначения межстрочного расстояния em. Вам тоже рекомендую придерживаться такой схемы. Остальные значения могут пригодиться в специфических случаях (например, если вы делаете реалистичную линейку на сайте и т.д.).
rem
rem — смесь px и em. Единица rem задаёт размер относительно размера шрифта элемента <html>. Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по-умолчанию, который мы, конечно, можем переопределить и использовать rem для задания шрифтов внутри относительно него: Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.
Мобильные шрифты
Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:
- vw – 1% ширины окна
- vh – 1% высоты окна
- vmin – наименьшее из (vw, vh), в IE9 обозначается vm
- vmax – наибольшее из (vw, vh)
Эти значения были созданы, в первую очередь, для поддержки мобильных устройств. Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна. Вы сможете легко увидеть, как работает vh, если поменяете размер окна браузера. Текст выше будет расти/уменьшаться.
Абсолютные
Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории и поскольку браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
in (дюйм, inch), 1in = 25,4mm
mm (миллиметр)
cm (сантиметр)
pt (точка, point), 72pt = 1in
pc (пика), 1pc = 12pt
Воспользуйтесь таблицей сравнения значений, чтобы правильно применить их на своем сайте.
