px, em, rem и другие
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
Достоинства
- Главное достоинство пикселя – чёткость и понятность
Недостатки
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории.
Вот, если интересно, их значения:
1mm(мм) =3.8px1cm(см) =38px1pt(типографский пункт) =4/3 px1pc(типографская пика) =16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
<div> Страусы <div>Живут также в Африке</div> </div>
24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в <div>
А вот аналогичный пример с em вместо px:
<div> Страусы <div>Живут также в Африке</div> </div>
Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1. раза больше, чем первая.
5
Выходит, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
В спецификации указаны также единицы ex и ch, которые означают размер символа "x" и размер символа "0".
Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква "x" и ноль "0".
В этом случае они носят более условный характер.
Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.
Проценты %, как и em – относительные единицы.
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
Это очень важная особенность процентов, про которую, увы, часто забывают.
Отличный источник информации по этой теме – стандарт, Visual formatting model details.
Вот пример с %, он выглядит в точности так же, как с em:
<div> Страусы <div>Живут также в Африке</div> </div>
В примере выше процент берётся от размера шрифта родителя.
А вот примеры-исключения, в которых % берётся не так:
margin-left- При установке свойства
margin-leftв%, процент берётся от ширины родительского блока, а вовсе не от егоmargin-left.
line-height- При установке свойства
line-heightв%, процент берётся от текущего размера шрифта, а вовсе не отline-heightродителя. Детали поline-heightи размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height- Для
width/heightобычно процент от ширины/высоты родителя, но приposition:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда%требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.
Итак, мы рассмотрели:
px– абсолютные, чёткие, понятные, не зависящие ни от чего.em– относительно размера шрифта.%– относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не px, ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – em и %.
Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em.
Вроде бы, использовать можно, однако есть проблема.
Попробуем использовать этот подход для <li>.
Протестируем на таком списке:
<ul>
<li>Собака
<ul>
<li>бывает
<ul>
<li>кусачей
<ul>
<li>только
<ul>
<li>от жизни
<ul>
<li>собачей</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>Пока это обычный вложенный список.
Теперь уменьшим размер шрифта до 0.8em, вот что получится:
<style>
li {
font-size: 0.8em;
}
</style>
<ul>
<li>Собака
<ul>
<li>бывает
<ul>
<li>кусачей
<ul>
<li>только
<ul>
<li>от жизни
<ul>
<li>собачей</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>Проблема очевидна.
Хотели, как лучше, а получилось… Мелковато. Каждый вложенный <li> получил размер шрифта 0.8 от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.
Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей rem, которая, можно сказать, специально придумана для таких случаев!
Единица rem задаёт размер относительно размера шрифта элемента <html>.
Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по умолчанию, который мы, конечно, можем переопределить и использовать rem для задания шрифтов внутри относительно него:
<style>
html {
font-size: 14px;
}
li {
font-size: 0.8rem;
}
</style>
<div><button>Кликните, чтобы увеличить размер шрифта</button></div>
<img src="https://js.cx/clipart/angry_dog. png">
<ul>
<li>Собака
<ul>
<li>бывает
<ul>
<li>кусачей
<ul>
<li>только
<ul>
<li>от жизни
<ul>
<li>собачей</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
let html = document.documentElement;
up.onclick = function() {
// при помощи JS увеличить размер шрифта html на 2px
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>
png">
<ul>
<li>Собака
<ul>
<li>бывает
<ul>
<li>кусачей
<ul>
<li>только
<ul>
<li>от жизни
<ul>
<li>собачей</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
let html = document.documentElement;
up.onclick = function() {
// при помощи JS увеличить размер шрифта html на 2px
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.
Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.
Единица rem не поддерживается в IE8-.
Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:
vw– 1% ширины окнаvh– 1% высоты окнаvmin– наименьшее из (vw,vh), в IE9 обозначаетсяvmvmax– наибольшее из (vw,vh)
Эти значения были созданы, в первую очередь, для поддержки мобильных устройств.
Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.
Этот текст написан с размером `5vh`.
Вы сможете легко увидеть, как работает vh, если поменяете высоту окна браузера. Текст выше будет расти/уменьшаться.
Мы рассмотрели единицы измерения:
px– абсолютные пиксели, к которым привязаны и потому не нужныmm,cm,ptиpc. Используется для максимально конкретного и точного задания размеров.em– задаёт размер относительно шрифта родителя, можно относительно конкретных символов:"x"(ex) и"0"(ch), используется там, где нужно упростить масштабирование компоненты.rem– задаёт размер относительно шрифта<html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются вrem, а JS меняет шрифт у<html>.%– относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.vw,vh,vmin,vmax– относительно размера экрана.
Используется для максимально конкретного и точного задания размеров.Переводим пиксели в сантиметры. Чему равен 1 пиксель в сантиметрах? Соотношение пикселей и сантиметров :: SYL.
ruЛюбого пользователя, впервые столкнувшегося с вопросом цифровых фотографий, обязательно заинтересует соотношение пикселей и сантиметров. А особенно если учесть, что сейчас цифровые фотографии прочно вошли в наш мир, то этот вопрос заинтересует даже человека, не имеющего компьютера. Ведь можно сделать фотографию хорошей цифровой зеркалкой, простенькой мыльницей или даже мобильным телефоном. У всех кадры разных размеров, но все снимают в точках или, по-научному, в пикселях, а не в сантиметрах. Итак, сколько же пикселей в 1 см? И хоть вопрос покажется на первый взгляд странным — любой пользователь компьютера эту задачу решает каждый день, и при этом не один раз.
Например, монитор, за которым работает пользователь. Пару лет назад 1024х768 — это было очень даже хорошо. Но при этом никто не задумывался, как это расшифровывается. Некоторые скажут — разрешение, и будут правы. В действительности же этот экран можно было выставлять и 800х600, и даже меньше. Сейчас, в век широкоформатников, цифры другие, и разрешения мониторов тоже другие.
Но опять же у одного монитора можно настроить и 1400х900, и 1680х1050 — размеры разные, а монитор-то остается один.
Итак, сложно ли перевести пиксели в сантиметры?
Без разрешения никуда
Однозначный ответ на этот вопрос дать сложно. Допустим, взять вышеприведенный широкоформатник — 1400х900. В одном случае так, но у таких мониторов множество поддерживаемых форматов.
С другой стороны, обычная открытка — 10х15 см. Если мы ее снимем с разрешением 150 точек, то получим одно количество точек. А если снять с разрешением 300 (обычное качество для полиграфических работ) — точек/пикселей будет в два раза больше (вообще-то больше, чем в два, но не будем углубляться). То есть без разрешения все равно посчитать не получится.
Что же такое разрешение? Возьмем обычную функцию «Фотошопа» — размер изображения.
В верхней части он нам дает размер в пикселях. В нижней части — в дюймах (дюйм ~2,54 см). Обратим внимание на поле, где написано 72. Теперь попробуем вместо 72 написать, например, 300.
Пиксели поменялись, но размеры в дюймах не меняются. Если вы выберете сантиметры — эффект не изменится. Это физика. То есть чем больше разрешение, тем меньше сантиметров будет наш конечный отпечаток. Звучит немного непонятно, но взгляните на картинку ещё раз. Ставим 72, получаем одно количество пикселей, ставим 300 — совершенно другое, при этом размеры конечного отпечатка… Правильно, не меняются.
Пиксель или точка
Но это далеко не один камень на пути. Чтобы считать более точно, давайте определимся для начала, что такое пиксель (или точка, так проще). Точка для монитора — это светящая единица измерения. То есть, 1400х900 можно принять так — по горизонтали у нас светится 1400 точек, по вертикали — 900. Точка на фотографии — тоже единица изменения, но другая. Если бесконечно увеличивать фотографию на мониторе, то мы увидим множество разноцветных точек вместо снимка любимого хомячка. Для того чтобы более или менее однозначно понять, чему равен пиксель в сантиметрах, нужно ответить на вопрос о том, для чего нам это надо.
Если говорить о фотографиях — что вы собираетесь снимать? Если вы собираетесь снять чистый, только выпавший снег — вам не нужно большое разрешение. Если же мы снимаем тот же пейзаж, но без снега — чем меньше разрешение мы выставим, тем хуже будет качество. При малом разрешении кадр может потерять какие-то мелкие детали. В полиграфии это звучит иначе, но там используется другая техника.
Есть ли простое решение?
Так есть ли простое решение — как пересчитать размер пикселей в сантиметрах? Для дизайнера однозначного ответа не существует, но для обычного пользователя, который просто фотографирует, такое решение можно вывести. Но для этого вернемся к разрешению. На самой первой картинке у нас указано 72 пикселя на дюйм. Это разрешение обычной цифровой мыльницы. Это же является и стандартом для экранного просмотра. Сам размер кадров может быть различным и зависит от модели аппарата. Тут и 2048х1536, тут и 640х480 (были и такие размеры у первых цифровых фотиков). Но какой бы размер у нас ни был — разрешение у нас будет обычное, 100 точек.
Разница в 28 точек идет от различия так называемых «русских» и «английских» точек. Русская отсчитывается от метра, а точнее, миллиметра, тогда как английская отсчитывается от дюйма. Величина точки по-русски 0,25 мм или четверть миллиметра. Та же величина по-английски равна 0,328 мм или 1/72 дюйма. В то же время дюйм равен 2,54 см. Вся техника отсчитывает 72 «английские» точки. Именно поэтому «Фотошоп» или любая цифровая мыльница будет писать 72 точки. Если переводить пиксели в сантиметры, точнее, сначала в дюймы, а потом в сантиметры, мы и получим 100 «русских» точек.
Число (примерное)
Если мы в «Фотошопе» изменим не 72, а поле справа от него. Выставим сантиметры, иными словами, разделим 72 на 2,54? У нас 72 поменяется на 28,346. Итак, чему равен 1 пиксель в сантиметрах, если разрешение 28,346 пикселей на сантиметр? Простой арифметический пример на деление выдает результат — 0,04 см или 0,4 мм. Результат, конечно, очень приблизителен, но для среднего пользователя он подойдет.
А теперь несколько примеров на соотношение пикселей и сантиметров
Несколько примеров. Сначала в 72 точки
Теперь, зная примерные размеры, вернемся к примеру с открыткой 10х15 см (некоторые фотостудии дают меньше, но это связано с размерами фотобумаги, стандарт — А4). Хватит ли нам такой открытки, чтобы напечатать квадрат 1000х1000, указанный на картинке из «Фотошопа»? Разрещение 72 точки. Переводим пиксели в сантиметры. 28,346х10, а потом на 15, округляя до целого, получаем — 283 на 425, это опять же очень приблизительный расчет.
Те, кто пробовал печатать снимки в домашних условиях, согласятся, что для печати, снятого даже мобильником, кадра на открытке, его нужно сильно масштабировать. В конце статьи будет приведена таблица, в которой отражен примерный перевод различных форматов в 150 точек. Кого заинтересует — могут при помощи калькулятора пересчитать в 100 или 72 точки.
Теперь возьмем стандартный форматный лист А4 и попробуем на нем разместить квадрат, который мы взяли для примера.
Как известно — форматный лист равен 210 мм на 297. 21 на 29,7 см. Опять используем 72 точки и пробуем перевести пиксели в сантиметры.
Цифр называть не станем, но можно убедиться, что нашего листа не хватит для размещения 1000 точек. При этом в примере у нас отображен квадрат 1000х1000, что уж говорить о формате кадра среднего 2 мг пиксельного фотика с кадрами 2048х1536?
Те же примеры, но в 300 точек
Теперь мы вернемся к «Фотошопу» и вместо 72 выставим 300 (хорошее полиграфическое качество). Форматы все теже. Открытка 10х15 см и лист бумаги 21х29.7см. Сначала открытка. Как видим, при другом разрешении у нас еще и запас есть.
Теперь таже операция с листом.
А лист и того лучше. Тут не только один квадрат можно положить.
В заключение
Вот и получается: чем выше наше разрешение, тем больше информации можно вместить. Мы переставили разрешение примерно в 4 раза. А количество возможных пикселей выросло во сколько? Во много.
Впрочем, соответствие пикселей и сантиметров приведено в двух таблицах выше. Напоминаем — для бумаги принято разрешение в 150 точек. Для экранного разрешения делим эти величины на два.
см в пиксели — Calculatorway
by calculateway
Конвертируйте см в пиксели с помощью нашего бесплатного и точного онлайн-калькулятора. Просто введите длину в CM и мгновенно см. Эквивалентное значение пикселя
Разрешение (PPI):
сантиметры:
| Pixels |
SOVERTER . SONTORMER 3
- PX = CM x Разрешение (PPI / DPI) / 2,54
- DPI = Точек3 на дюйм 900 на дюйм
- см = 9 сантиметр0037
- PX = пиксели
| сантиметры | пиксели | Centimeters | Pixels |
|---|---|---|---|
| 1 cm | 37. 795 px | 1.5 cm | 56.692 px |
| 2 cm | 75.590 px | 2.5 cm | 94.488 px |
| 3 cm | 113.385 px | 3.5 cm | 132.283 px |
| 4 cm | 151.181 px | 4.5 cm | 170.078 px |
| 5 cm | 188.976 px | 5.5 cm | 207.874 px |
| 6 cm | 226.771 px | 6.5 cm | 245.669 px |
| 7 cm | 264.566 px | 7. 5 cm | 283.464 px |
| 8 cm | 302.362 px | 8.5 cm | 321.259 px |
| 9 cm | 340.157 px | 9.5 cm | 359.055 px |
| 10 cm | 377.952 px | 10.5 cm | 396.850 px |
| 11 cm | 415.7480 px | 11.5 cm | 434.645 px |
| 12 cm | 453.543 px | 12.5 cm | 472.440 px |
| 13 cm | 491.338 px | 13. 5 cm | 510.236 px |
| 14 cm | 529.133 px | 14.5 cm | 548.031 px |
| 15 cm | 566.929 px | 15.5 cm | 585.826 px |
| 16 cm | 604.724 px | 16.5 cm | 623.622 px |
| 17 cm | 642.519 px | 17.5 cm | 661.417 px |
| 18 cm | 680.314 px | 18.5 cm | 699.212 px |
| 19 cm | 718.110 px | 19. 5 cm | 737.007 px |
| 20 cm | 755.905 px | 30 cm | 1133.858 px |
| 40 cm | 1511.811 px | 50 cm | 1889.763 px |
How to use the Cm to Pixels conversion calculator?
Чтобы преобразовать сантиметры в пиксели, введите значение в сантиметрах в поле ввода. После того, как вы ввели допустимое значение для см, нажмите «конвертировать», и ответ отобразится в поле для ответов.
Подробнее преобразователь
Преобразование преобразования единиц измерения / единичный конвертер
performance (IPS)Cooking / RecipesData rateDensityDistanceDose area productDose length productDynamic viscosityElectric chargeElectric conductanceElectric currentElectric dipole momentElectrical elastanceElectrical resistanceEnergyEquivalent doseFabric weight (Textiles)Font size (CSS)ForceFrequencyFuel consumptionHeat capacityHeat fluxHeat transfer coefficient (U-value)IlluminanceImpulseInductanceIonizing radiation doseKinematic viscosityLeak rateLuminanceLuminous energyLuminous fluxLuminous intensityMagnetic fieldMagnetic field strengthMagnetic fluxMagnetomotive forceMass / WeightMass flow rateMolar concentrationMolar heat capacityMolar massMolar volumeMusical intervalNumeral systemsOil equivalentParts-Per .
..PowerPressureRadiation doseRadioactivityRotational speedSI-prefixesSolid angleSound levelSpecific heat capacitySurface tensionTemperatureTextile measurementThermal conductanceThermal conductivityThermal insulance (R-value)TimeTorqueVelocityVoltageVolumeVolumetric flow rateVolumetric heat capacityVolumic heat flux
Преобразуемое значение:
Исходная единица измерения: Ангстрем [Å]Астрономическая единица [AU]Аттометр [am]Длина кабеляСантиметр [см]Цепь [ch]Кубит (британский)Декаметр [dam]Дециметр [дм]FathomFemtometre [ fm]Фут [фут]ФурлонгГигаметр [Гм]Гектометр [чм]Дюйм [дюйм]Километр [км]Световые дниСветовые часыСветовые минутыСветовые секундыСветовые годыСсылкаМегаметр [Мм]Метр [м]Метрическая миляМикрометр [мкм] Мил — Тысяча миль (международная) [ми ]Миля (США)Миллиметр [мм]Нанометр [нм]Морская миляПарсек [ПК]ПершПиметр [pm]Планковая длинаПолюсКварталРимская миляСтатутная миляTwipX Единица — ЗигбанЯрды
Целевая единица: Ангстрем [Å] Астрономическая единица [AU] Аттометр [am] Длина кабеля Сантиметр [cm] Цепь [ch] Кубит (британский) Декаметр [dam] Дециметр [dm] Fathom Femtometre [fm] Foot [ft] Furlong Gigameter [Gm ]Гектометр [чм]Дюйм [дюйм]Километр [км]Световые дниСветовые часыСветовые минутыСветовые секундыСветовые годыСсылкаМегаметр [Мм]Метр [м]Метрическая миляМикрометр [мкм]Мил — ТысячаМиль (международная) [мили]Миля (США)Миллиметр [мм] Нанометр [нм]Морская миляПарсек [пк]ПершПиметр [пм]Планковая длинаПолюсКварталРимская миляСтатутная миляTwipX Единица — ЗигбанЯрды
Преобразование единиц измерения совсем не тривиально:
Миллиметр, сантиметр, дециметр, метр, километр, мили, морской
мили, футы, ярды, дюймы, локти, парсекы и световые годы.
Со всем
эти измерения расстояний могут быть рассчитаны. И это даже не
близкие ко всем возможным измерениям , а точнее только самые распространенные
те. В случае площадей (квадратный метр, квадратный километр, площадь, гектар,
Морган, акр среди прочего), температуры (градусы Цельсия, Кельвина,
по Фаренгейту), скорость (м/с, км/ч, мили/ч, узлы, мах), вес (сотни
вес, килограмм, метрическая тонна, тонна США, имперская тонна, фунт и др.)
и объемы (кубический метр, гектолитр, имперский галлон жидкости, галлон США
жидкость, сухой галлон США, баррель среди прочего) не намного лучше. К
полный хаос большинство из этих единицы также имеют подразделения
и выше единиц (-> милли, санти, деци и др.). Короче: Хаос,
в котором никто действительно, кажется, не видит ясно без помощи
справки и различные формы помощи.
Калькулятор для преобразования единиц измерения , подобный этому, идеально подходит для преобразования единиц измерения .