Единицы измерения vh, vw, vmin, vmax

REM as in Root EM

While em is relative to the font size of its direct or nearest parent, rem is only relative to the (root) . I like to think of it as a reset. If a style sheet is built in a modular fashion, then rem shouldn’t be needed very often, but it can be handy at times.

For example, if you’re trying to achieve consistent spacing without extra markup, rem can be used to define the padding and margins.

EM will scale padding and margins too

See the Pen AlxHk by Jeremy Church (@jeremychurch) on CodePen.1457

Use REM for consistent padding and margins

See the Pen qjEBs by Jeremy Church (@jeremychurch) on CodePen.1457

PX can be used for consistent padding and margins too, but it doesn’t scale across media queries like em and rem.

Font Sizing with Rem Units

One of the pioneers of using rem units for font sizing is Jonathan Snook with his Font sizing with REM article, back in May, 2011. Like many other CSS developers, he had to face the problems that em units bring in complex layouts.

At that time, older versions of IE still had large market shares and they were unable to zoom text that was sized with pixels. However, as we saw earlier, it is very easy to lose track of nesting and get unexpected results with em units.

The main issue with using rem for font sizing is that the values are somewhat difficult to use. Let’s see an example of some common font sizes expressed in rem units, assuming, of course, that the base size is 16px:

• 10px = 0.625rem
• 12px = 0.75rem
• 14px = 0.875rem
• 16px = 1rem (base)
• 18px = 1.125rem
• 20px = 1.25rem
• 24px = 1.5rem
• 30px = 1.875rem
• 32px = 2rem

As we can see, these values are not very convenient for making calculations. For this reason, Snook used a trick called “62.5%“. It was not a new discovery, by any means, as it was already used with em units:

As rem units are relative to the root element, Snook’s variant of the solution becomes:

One also had to take into account the other browsers that didn’t support rem. Thus the code from above would have actually been written this way:

While this solution seems to be close to the status of a “golden rule”, there are people who advise against using it blindingly. Harry Roberts writes his own take on the use of rem units. In his opinion, while the 62.5% solution makes calculation easier (as the font sizes in are 10 times their rem values), it ends up forcing developers to explicitly rewrite all the font sizes in their website.

A third view comes from Chris Coyier of CSS-Tricks. His solution makes use of all three units we encountered so far. He keeps the root size defined in , modules defined with rem units, and elements inside modules sized with em. This approach makes easier to manipulate global size, which scales the type in the modules, while the module content is scaled based on the module font size itself. Louis Lazaris discussed that latter concept in The Power of em Units in CSS.

In the example below you can see how Chris’s approach would look:

See the Pen One Method for Using ems and rems in CSS by SitePoint (@SitePoint) on CodePen.

In practice, there are major frameworks such as Bootstrap 4 and the guidelines that use rem units for sizing text content.

A special mention goes to , a very popular collection of React components. Not only are they sizing text the same way, but also offer a mechanism to implement the “10px simplification” we mentioned above.

Another recent project, Every Layout, combines em and rem units in a very inspired way. It comes closest to Chris Coyier’s model outline earlier and it uses em units to emphasize inline elements like SVG icons, spans or other similar elements.

As you can see, there is no “silver bullet” solution. The combinations possible are limited only by the imagination of the developers.

Значения для правил в CSS — цвета, функционалы и размеры

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

В общем-то ничего сложного и объемного сегодня не будет, но вот в следующий статье мы уже начнем рассматривать селекторы — тему довольно объемную и, наверное, сложноватую в освоении.

В качестве значений для этих правил могут выступать какие-нибудь слова (например, left, right, center, justify и т.п.), которые заранее известны и оговорены в таблице из этой спецификации (см. рисунок выше — столбец «Values»). В качестве значений могут выступать и просто цифры, не имеющие размерности (например, в правиле «z-index») или обозначения шестнадцатеричных кодов цвета (например, #fff8dc).

Чуток поподробнее остановимся на задании цветов в CSS и как это можно претворять в жизнь:

Возможно использование в качестве значений для правил CSS и так называемых функционалов. Ярким примером функционала является Url и заключенный в круглые скобки — url (images/navtabr.png). Таким образом очень часто задают в стилях фоновое изображение:

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

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

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

Абсолютные размеры в CSS могут использоваться все для той же печати. Сантиметры (cm) и миллиметры (mm) являются основополагающими единицами метрической системы, а дюймы (in) являются базовой единицей, от которой образуются очень часто используемые в полиграфии пункты (pt) и пики (pc).

Дюйм (in), соответственно, составляет 25,4 миллиметра (mm), а пункт (pt) образуется делением одного дюйма (in) на 72 части. Т.о. один пункт (pt) будет равен примерно одной трети миллиметра (mm). Ну, а одна пика (pc) имеет размер равный 12 пунктам (pt). Тут, думаю, все и так понятно.

vmin и vmax

В то время как и всегда относятся к высоте и ширине viewport, и относятся к минимальной и максимальной ширине или высоте viewport, в зависимотсти от того, какая из величин больше, а какая меньше. Например, если ширина окна браузера задана в 1100px, а высота в 700px, будет равен 7px, а 11px. Но, если ширина будет установлена в 800px, а высота в 1080px, то будет равен 8px, а – .

Итак, как можно воспользоваться этими значениями?

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

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

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

Пиксели, Em, Ex и проценты — относительные размеры в CSS

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

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

Относительные размеры в CSS могут задаваться с помощью следующих единиц:

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

Далее следуют более хитрые относительные единицы размеров шрифтов, которые используются в CSS — Em и Ex. Первое — это высота шрифта используемого на компьютере пользователя по умолчанию, а Ex — высота прописной буквы «x» в используемом по умолчанию шрифте. Наверное, немного не понятно. Давайте рассмотрим это чуть поподробнее.

Многие браузеры принимают значение Ex равным половине значения Em (например, IE). У любого шрифта есть базовая линия, есть заглавные буквы и некоторые особенные строчные буквы, которые выступают за базовую линию (например, «y»). Есть еще буквы с диакритическими знаками, например, «ё» и «й» в русском языке или какие-нибудь умляуты и т.п. Поэтому размер шрифта (Em) определяется выносными элементами.

Ну, а Ex — это, как я уже говорил — высота прописной (маленькой) буквы «x» (икс) в латинской раскладке. Понятно, что в зависимости от соотношения строчных и прописных букв в шрифте, эти значения Em и Ex могут относиться к друг другу по разному, а не просто как Ex=Em/2.

Единицу относительных размеров Ex используют в CSS довольно редко, в основном применяют Em (не беря в расчет пикселы, которые используют для указания размера еще чаще). Но есть еще один способ задания относительных размеров — проценты, т.е. он должен будет высчитываться относительно чего-либо.

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

Ограничения Root Em

REM помогает создавать каскадные таблицы с различным font-size для заголовков и абзацев. Он значительно упрощает верстку, так как не нужно изменять код полностью – достаточно поправить размер шрифта в теге html. Существует также ограничение в использовании этой единицы. В старых версиях браузеров Opera и IE и в некоторых браузерах для Android они до сих пор не поддерживаются. Поэтому разработчики вынуждены использовать пиксели в качестве запасного варианта и писать двойной код. Современные браузеры будут считывать строчки с размером шрифта в пикселях и переводить их в REM, а устаревшие просто не увидят код с неизвестной им единицей измерения. Но если забыть об этом и начать разрабатывать сайт под какой-то определенный экран, тогда можно потерять множество пользователей, которые просто не смогут воспринять контент, сломавшийся из-за использования REM или EM.

Простейшая утилита для создания домашнего медиасервера

Собственно, вот мы и подошли к основному вопросу настройки и включения UPnP-сервера. Для начала, как уже понятно, нужно определиться с программой (UPnP-клиентом). В качестве самой простой, не требующей ручной настройки утилиты можно посоветовать Samsung PC Share Manager.

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

Тут важно проверить, открыт ли к ним тот самый общий доступ. Делается это из меню свойств, которое вызывается правым кликом на директории

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

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

Relative Lengths

Relative length units specify a length relative to another length property.
Relative length units scale better between different rendering medium.

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)	Try it
ex	Relative to the x-height of the current font (rarely used)	Try it
ch	Relative to the width of the «0» (zero)	Try it
rem	Relative to font-size of the root element	Try it
vw	Relative to 1% of the width of the viewport*	Try it
vh	Relative to 1% of the height of the viewport*	Try it
vmin	Relative to 1% of viewport’s* smaller dimension	Try it
vmax	Relative to 1% of viewport’s* larger dimension	Try it
%	Relative to the parent element	Try it

Tip: The em and rem units are practical in creating perfectly
scalable layout!* Viewport = the browser window size. If the viewport is 50cm
wide, 1vw = 0.5cm.

Вертикальный и горизонтальный спейсинг

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

Модалка

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

.modal-body {    top: 20vh;}

Посмотрите это видео, чтобы посмотреть на результат.

Шапка

Шапка это секция, которая показывает нам общую картину на странице или сайте. Часто там есть заголовок и описание, и среди этого всего есть фиксированная высота и падинги для верха и подвала страницы. Тут нам интересны падинги.

Для примера, вот как выглядит CSS:

.page-header {    padding-top: 1rem;    padding-bottom: 1rem;}@media (min-width: 800px) {.page-header {        padding-top: 4rem;        padding-bottom: 4rem;    }}

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

.page-header {    padding-top: 10vh;    padding-bottom: 10vh;}.page-header h2 {    margin-bottom: 1.5vh;}

Я использовал для паддинга в шапке и маргина под заголовком

Обратите внимание как меняется спейсинг!. Сетка из нескольких элементов

Сетка из нескольких элементов

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

Используя их в , мы можем получить желаемый результат

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

.wrapper {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    grid-gap: calc(14px + 1vh) calc(14px + 0.5vw);}

Use em or px for font sizes

CSS inherited the units (point) and (pica) from typography. Printers have traditionally
used those and similar units in preference to or
. In CSS there is no reason to use , use whichever unit you prefer. But there is a good
reason to use neither nor any other absolute
unit and only use and .

Here are a few lines of different thickness. Some or all of
them may look sharp, but at least the 1px and 2px lines should be
sharp and visible:

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

If the first four lines all look the same (or if the 0.5pt line
is missing), you are probably looking at a computer monitor that
cannot display dots smaller than 1px. If the lines appear to
increase in thickness, you are probably looking at this page on a
high-quality computer screen or on paper. And if 1pt looks thicker
than 1.5px, you probably have a handheld screen.

The magic unit of CSS, the , is a often a good
unit to use, especially if the style requires alignment of text to
images, or simply because anything that is 1px wide or a multiple
of 1px is guaranteed to look sharp.

But for font sizes it is even better to use .
The idea is (1) to not set the font size of the BODY element (in
HTML), but use the default size of the device, because that is a
size that the reader can comfortably read; and (2) express font
sizes of other elements in : to make the H1 2½ times as big as the normal, body
font.

The only place where you could use (or or ) for setting a font size is in
style sheets for print, if you need to be sure the printed font is
exactly a certain size. But even there using the default font size
is usually better.

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

Абсолютные единицы измерений имеют фиксированное значение, часто зависящее от друг от друга, и привязаны к некоторым физическим измерениям. Они полезны в том случае, когда известно средство вывода. Абсолютные единицы состоят из физических единиц (дюймов, см, мм, пунктов, пик) и единицы визуального угла (px):

Единица измерения	Название	Эквивалент
cm	сантиметры	1cm = 96px/2.54
mm	миллиметры	1mm = 1/10 от 1cm
in	дюймы	1in = 2.54cm = 96px
pc	пика	1pc = 1/6 от 1in (дюйма) или 12 пунктов
pt	пункты	1pt = 1/72th от 1in (дюйма)
px	пиксели	1px = 1/96 от 1in (дюйма)

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

Самое интересное, что все остальные единицы можно представить, оттолкнувшись от пикселей:

• 1mm (мм) = 3.8px
• 1cm (см) = 38px
• 1pt (типографский пункт) = 4/3 px
• 1pc (типографская пика) = 16px

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

Цитата из спецификации:

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

Посмотреть файл примера в новой вкладке.

Relative Units

Both rem and em are relative units, px is not. Before considering rem, it’s important to understand the relationship between em, markup and inheritance.

Below, the example demonstrates how each nested child assumes the parent is 1em(100%). Thus children inherit size by scaling in relation to the parent font size.

EM values inherit from their parent

See the Pen rCcIh by Jeremy Church (@jeremychurch) on CodePen.1457

PX values do not inherit

See the Pen dlyqw by Jeremy Church (@jeremychurch) on CodePen.1457

Visit pxtoem.com for conversion tables and calculator.

While the value remains 0.773em, the actual font size is calculated at 77.3% of its direct parent, which in turn scales from its parent. This continues up the DOM tree whenever a parent has a defined .

In the example, several elements, each with a font size, are nested for a visual effect. You can see it’s not a good practice, because the compound inheritance creates unwanted results. However, you shouldn’t have to worry about this if your CSS and markup are modular to begin with.

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

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

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

Единица	Описание
cm	сантиметры Попробуй
mm	миллиметры Попробуй
in	дюймы (1 дюйм = 96px = 2.54см) Попробуй
px *	пиксели (1px = 1/96th в 1) Попробуй
pt	точки (1pt = 1/72 в 1) Попробуй
pc	picas (1pc = 12 pt) Попробуй

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

Единица rem: смесь px и em

Итак, мы рассмотрели:

• – абсолютные, чёткие, понятные, не зависящие ни от чего.
• – относительно размера шрифта.
• – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

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

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

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

Следующие кандидаты – и .

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

Вроде бы, использовать можно, однако есть проблема.

Попробуем использовать этот подход для .

Протестируем на таком списке:

Пока это обычный вложенный список.

Теперь уменьшим размер шрифта до , вот что получится:

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

Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей , которая, можно сказать, специально придумана для таких случаев!

Единица задаёт размер относительно размера шрифта элемента .

Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по умолчанию, который мы, конечно, можем переопределить и использовать для задания шрифтов внутри относительно него:

Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.

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

Единица не поддерживается в IE8-.

Vmin и Vmax — примеры использования

Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.

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

.page-header {    padding: 10vmin 1rem;}

Вертикальные медиа запросы и единицы вьюпорта

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

Сейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Размер шрифта в 1 px

С самого первого дня, когда зародился Интернет, мы (веб-мастера) использовали пиксели для задания размеров текста. Это надежный и понятный способ.

К сожалению, пользователи Internet Explorer — даже IE9 — не имеют возможности изменять размер текста, используя для этого встроенную функцию браузера.

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

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

Save Lives with EM

You can choose a different ratio/scale and calculate your own values on Type Scale.

Well, maybe not lives, but it will save lines … of code. The following examples do the same thing; update font sizes and padding within a media query. The initial values are calculated by incrementally increasing 1em (16px or 100%) at a 1:1.2 ratio.

EM scales by updating one value

Or, recalculate every PX value

There’s only one em value to overwrite in the media query, because em inherits and scales relative to its parent ( in this case) font size, similar to the way vector paths scale proportionally.

The code is doubled when updating px, because each value has to be recalculated and defined in the media query.

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

	сантиметр	1cm = 96px/2.54 ≈ 37,795px
	миллиметр	1mm = 1/10 от 1cm
	четверь миллиметра	1q = 1/40 от 1cm = 0.25mm ≈ 0.945px
	дюйм	1in = 2.54cm = 96px
	пика	1pc = 1/6 от 1in
	пункт, точка	1pt = 1/72 от 1in
	пиксель	1px = 1/96 от 1in, 0.75 от pt

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

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

Я попыталась разными способами получить полоску длиной 10 сантиметров. Все полоски равны друг другу, но ни одна не равна 10 сантиметрам, если приложить линейку к экрану. Проверила на двух мониторах: на одном они короче, на другом — длиннее.

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

Что такое пиксель и какого он размера? Чем отличаются пиксели от точек ? Почему у них такие странные размеры в 1/96 дюйма и 1/72 дюйма соответственно? Как были выбраны эти значения и почему этих единиц измерения две? Попытка разобраться с мелкой точкой на экране вызывает множество вопросов и требует погружения в историю. Я попыталась выяснить как всё было, и вот что узнала.

Когда появились первые программы для предпечатной подготовки, нужно было как-то соотнести размер элементов на экране с тем, чтоб будет напечатано на бумаге. Тогда оказалось, что один дюйм (inch) на экране соответствует 72 точкам. Это соотношение зафиксировано в , — это 1/72 дюйма. Изначально это была типографская единица измерения, и её значения менялись со временем, но с появлением компьютерных программ для полиграфии значение пришлось стандартизировать.

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

Размер составляет 0.75 от . По сути, — это более крупный пиксель.

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

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

При этом важно помнить, что раз CSS-пиксели уже не соответствуют физическим точкам экрана, сантиметры и дюймы при выводе на экран тоже не будут не соответствовать своим реальным размерам, об этом есть и в спецификации:

То есть, если использовать дюймы для вёрстки веб-страниц, один дюйм всегда будет равен 96 пикселям, но никогда — реальной физической единице:

Таким образом, главное в абсолютных единицах — контекст использования:

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

Пока копалась в истории единиц измерения, выяснилось, что во внутреннем коде Gecko когда-то была ,
удалили в 2009-м:

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

Пример такого использования я подсмотрела в этом демо

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

Скриншот:

Чистое безумие, конечно. Картина воспроизведена с помощью , и мне кажется, тему рисования на CSS на этом можно закрывать.

Вес стилей демо — 4.5Mb, а если бы там вместо были пиксели, стили весили бы на 300Kb больше.

Относительно шрифта: em

– текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: , и т.п.

Размеры в – относительные, они определяются по текущему контексту.

Например, давайте сравним с на таком примере:

пикселей – и в Африке пикселей, поэтому размер шрифта в одинаков.

А вот аналогичный пример с вместо :

Так как значение в высчитывается относительно текущего шрифта, то вложенная строка в раза больше, чем первая.

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

Что такое размер шрифта?

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

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

Единицы и

В спецификации указаны также единицы и , которые означают размер символа и размер символа .

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

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

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

Теперь рассмотрим, что такое единица измерения REM и как ею пользоваться. Первое упоминание о REM появилось в 2011 году в комментарии пользователя к статье немецкого разработчика Геррита ван Аакена об использовании пикселей в CSS–коде. Эта относительная единица по значению близка к EM, и его название переводится как «корневой EM», или Root Em. Поведение REM более предсказуемо. Применение этой единицы в верстке облегчает подсчет размеров элементов в различных частях кода, так как REM в CSS равняется значению размера шрифта, установленного для корневого элемента – тега HTML. Но чаще это значение добавляется также и в body, чтобы исключить ошибки с расчетами. Использование REM в CSS, если его значение не прописано в теге HTML, становится еще проще. 1 REM будет равняться стандартным 16 пикселям, как и в случае с EM, значение которого не установлено.