Единицы измерения: px, em, rem и другие
В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.
Пиксели: px
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
Достоинства
- Главное достоинство пикселя – чёткость и понятность
Недостатки
- Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами
Давно на свалке: mm , cm , pt , pc
Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.
Вот, если интересно, их значения:
- 1mm (мм) = 3.8px
- 1cm (см) = 38px
- 1pt (типографский пункт) = 4/3 px
- 1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.
Почему в сантиметре cm содержится ровно 38 пикселей?
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.
Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.
Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.
Относительно шрифта: em
1em – текущий размер шрифта.
Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.
Размеры в em – относительные, они определяются по текущему контексту.
Например, давайте сравним px с em на таком примере:
Страусы Живут также в Африке 24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в одинаков.
А вот аналогичный пример с em вместо px :
Страусы Живут также в Африке Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.
Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
Что такое размер шрифта?
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.
Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.
Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
Единицы ex и ch
В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .
Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.
Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.
Проценты %
Проценты % , как и em – относительные единицы.
Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»
Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.
Это очень важная особенность процентов, про которую, увы, часто забывают.
Отличный источник информации по этой теме – стандарт, Visual formatting model details.
Вот пример с % , он выглядит в точности так же, как с em :
Страусы Живут также в Африке В примере выше процент берётся от размера шрифта родителя.
А вот примеры-исключения, в которых % берётся не так:
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 в %.
Единица rem: смесь px и em
Итак, мы рассмотрели:
- px – абсолютные, чёткие, понятные, не зависящие ни от чего.
- em – относительно размера шрифта.
- % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – em и % .
Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .
Вроде бы, использовать можно, однако есть проблема.
Протестируем на таком списке:
Преобразовать миллиметр в Пиксели (мм в px):
С помощью этого калькулятора можно ввести значение для конвертации вместе с исходной единицей измерения, например, ’93 миллиметр’. При этом можно использовать либо полное название единицы измерения, либо ее аббревиатуруНапример, ‘миллиметр’ или ‘мм’. После ввода единицы измерения, которую требуется преобразовать, калькулятор определяет ее категорию, в данном случае ‘Размер шрифта (CSS)’. После этого он преобразует введенное значение во все соответствующие единицы измерения, которые ему известны. В списке результатов вы, несомненно, найдете нужное вам преобразованное значение. Как вариант, преобразуемое значение можно ввести следующим образом: ‘8 мм в px‘ или ’97 мм сколько px‘ или ’65 миллиметр -> Пиксели‘ или ’76 мм = px‘ или ’39 миллиметр в px‘ или ’54 мм в Пиксели‘ или ’31 миллиметр сколько Пиксели‘. В этом случае калькулятор также сразу поймет, в какую единицу измерения нужно преобразовать исходное значение. Независимо от того, какой из этих вариантов используется, исключается необходимость сложного поиска нужного значения в длинных списках выбора с бесчисленными категориями и бесчисленным количеством поддерживаемых единиц измерения. Все это за нас делает калькулятор, который справляется со своей задачей за доли секунды.
Кроме того, калькулятор позволяет использовать математические формулы. В результате, во внимание принимаются не только числа, такие как ‘(46 * 7) мм’. Можно даже использовать несколько единиц измерения непосредственно в поле конверсии. Например, такое сочетание может выглядеть следующим образом: ’93 миллиметр + 279 Пиксели’ или ’76mm x 96cm x 67dm = ? cm^3′. Объединенные таким образом единицы измерения, естественно, должны соответствовать друг другу и иметь смысл в заданной комбинации.
Если поставить флажок рядом с опцией ‘Числа в научной записи’, то ответ будет представлен в виде экспоненциальной функции. Например, 3,906 249 964 453 1 × 10 27 . В этой форме представление числа разделяется на экспоненту, здесь 27, и фактическое число, здесь 3,906 249 964 453 1. В устройствах, которые обладают ограниченными возможностями отображения чисел (например, карманные калькуляторы), также используется способ записи чисел 3,906 249 964 453 1E+27. В частности, он упрощает просмотр очень больших и очень маленьких чисел. Если в этой ячейке не установлен флажок, то результат отображается с использованием обычного способа записи чисел. В приведенном выше примере он будет выглядеть следующим образом: 3 906 249 964 453 100 000 000 000 000. Независимо от представления результата, максимальная точность этого калькулятора равна 14 знакам после запятой. Такой точности должно хватить для большинства целей.
Конвертер миллиметров в пиксели (px)
Это бесплатный и быстрый конвертер, который вы можете использовать для преобразования миллиметров в пиксели (px) онлайн. введите значение разрешения (DPI или PPI) и значение в миллиметрах (mm), которое вы хотите преобразовать в пиксели, и нажмите кнопку преобразования, Вот и все!
Как конвертировать mm в пиксели?
Ранее мы объясняли, как преобразовать px в mm, а теперь мы объясним, как преобразовать mm в px.
У вас есть два варианта преобразования миллиметров в пиксели: автоматически и быстро с помощью приведенного выше конвертера миллиметров в пиксели или вручную с помощью уравнения преобразования миллиметров в пиксели.
Уравнение преобразования миллиметров в пиксели:
Пиксель = миллиметр * (разрешение / 25.4)
Например, если значение миллиметра (mm) равно 24, а значение ppi равно 96, то значение пикселя (px) будет пиксель = 24 * (96 / 25,4) = 90,708661417323.
Таблица перевода миллиметров в пиксели
Это таблица для наиболее распространенных значений для преобразования mm в px, если значение разрешения равно 96
| Миллиметры | Пиксели |
|---|---|
| 2 Миллиметры | 7.5590551181102 Пиксели |
| 3 Миллиметры | 11.338582677165 Пиксели |
| 4 Миллиметры | 15.11811023622 Пиксели |
| 5 Миллиметры | 18.897637795276 Пиксели |
| 6 Миллиметры | 22.677165354331 Пиксели |
| 7 Миллиметры | 26.456692913386 Пиксели |
| 10 Миллиметры | 37.795275590551 Пиксели |
| 13 Миллиметры | 49.133858267717 Пиксели |
| 15 Миллиметры | 56.692913385827 Пиксели |
| 18 Миллиметры | 68.031496062992 Пиксели |
| 20 Миллиметры | 75.590551181102 Пиксели |
| 30 Миллиметры | 113.38582677165 Пиксели |
| 35 Миллиметры | 132.28346456693 Пиксели |
| 40 Миллиметры | 151.1811023622 Пиксели |
| 45 Миллиметры | 170.07874015748 Пиксели |
| 50 Миллиметры | 188.97637795276 Пиксели |
| 60 Миллиметры | 226.77165354331 Пиксели |
| 70 Миллиметры | 264.56692913386 Пиксели |
| 80 Миллиметры | 302.36220472441 Пиксели |
| 90 Миллиметры | 340.15748031496 Пиксели |
| 100 Миллиметры | 377.95275590551 Пиксели |
| 110 Миллиметры | 415.74803149606 Пиксели |
| 120 Миллиметры | 453.54330708661 Пиксели |
| 130 Миллиметры | 491.33858267717 Пиксели |
| 140 Миллиметры | 529.13385826772 Пиксели |
| 150 Миллиметры | 566.92913385827 Пиксели |
| 160 Миллиметры | 604.72440944882 Пиксели |
| 170 Миллиметры | 642.51968503937 Пиксели |
| 180 Миллиметры | 680.31496062992 Пиксели |
| 190 Миллиметры | 718.11023622047 Пиксели |
| 200 Миллиметры | 755.90551181102 Пиксели |
| 210 Миллиметры | 793.70078740157 Пиксели |
| 220 Миллиметры | 831.49606299213 Пиксели |
| 230 Миллиметры | 869.29133858268 Пиксели |
| 240 Миллиметры | 907.08661417323 Пиксели |
| 250 Миллиметры | 944.88188976378 Пиксели |
ПОДСКАЖИТЕ Сколько в 1 мм пикселей!
Количество пикселей в мм может быть разным.
Рисунок делится на квадраты (пиксели) .
И в зависимости от того, сколько этих пикселей будет на рисунке определенного размера, можно подсчитать их количество в мм.
Например: рисунок 10х10 мм содержит 100 пикселей. Значит размер каждого пикселя равен 1 мм.
Если рисунок 10х10 мм содержит 200 пикселей. то каждый пиксель будет иметь размер 0,5 мм
Остальные ответы
ты сам понял что спросил,
это одноху..ствено — сколько яблок в 1 кирпиче
))))))))))). это надо искать в характеристиках устройства. пиксель — не мера длины.
Вопрос некорректный.Всё зависит от размера матрицы.
navernoe v 1 mm-1mm a , v 1mb -1000 mm
Это зависит от разрешения изображения, то есть от значения dpi (чочек на дюйм) . Так что нельзя сказать сколько их в миллиметре, это значение можно легко изменить.
как можно перевести из пикселей в миллиметры, если пиксель — понятие переменное.? ? Для конкретного монитора-ширина монитора в сантиметрах (1 дюйм ~ 2.5 сантиметра) делится на ширину пиксела — получается число. . вот это и есть сколько миллиметров в одном пикселе
Водитель думает, что в 1 килобайте 1000 байтов, и уверен в этом.
Программист думает, что в 1 километре 1024 метра, но не уверен в этом.
Вам смешно или грустно?
Берём стандартное число, третье, которое поможет нам сообразить, это число мировой стандарт, находиться в windows — 96dpi.
И это мониторный пиксель.
Принтерные пиксель будет — это при 300dpi
11,811 — 11 пикселей короче.
мой принтер печатает 600 dpi — laserjet1020, хотя может и 1200
это 23.622 (при 600 dpi) пикселя, короче 23 с половиной на миллиметр.
Итог, из итоговых результатах, можно перевести с миллиметров на пиксели измерив ширину и высоту.
Тогда 10 миллиметров на 5 миллиметров (получить что держим горизонтально эту фото, пусть это будет фото) получиться что 37.8 пикселей на 18.9 пикселей.
Если держать эту фотку вертикально будет 18.9×37.9 (x это не умножить, это обозначение такое принятое по ней можно понять держут фото вертикально или горизонтально).
Так же можно и вычислить мегапиксели. Так как слово мега обозначает всегда миллион, это из системы СИ придуманное слово, то 10 миллиметров, раз то 37.9, мы должны поделить на миллион и получим 0.0000379 мегапикселей, раз мега миллион, делим на миллион, тогда 1.0 было бы 1 мегапикселей или миллион пикселей.
Но если у на фотка на компе, то мегапиксели так считаются, берём пиксели в ширину и высоту или в высоту и в ширину например 18.9 и умножаем её на 37.8 полученный результат делим на миллион и получаем результат.