Pt в px: Конвертер pt в px
Таблица соотношений px, pt, em %
Главная > Web-верстка > Таблица соотношений px, pt, em %Таблица соотношений px, pt, em %
| Пункт, pt | Пиксель, px | Единица, em | Процент,% |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 13px | 0.8em | 80% | |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 19px | 1.2em | 120% | |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 26px | 1.6em | 160% | |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Немного теории:
Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Как показала практика, использование em или % удобнее чем пункты и пиксели.
*информация бралась с сайтов
habrahabr.ru и sureshjain.wordpress.com
Понравилось это:
Нравится Загрузка…
Похожее
Таблица соотношений px, pt, em %
Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
| Пункт, pt | Пиксель, px | Единица, em | Процент,% |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Tags: %, em, pt, px, Единица, Пиксель, Процент, Пункт
Единицы измерения в CSS — px, pt, em % – Андрей Шарапов
Давно уже ищу информацию в интернете информацию о соотношении единиц измерения, таких как 0.75em= px? или Чему равен 1em?. Вот отличная табличка. Еще существует такое значение как Rem, но его в табличке пока нет.
Pixels
Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Points
Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т. д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
Ems
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т. д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
Percents
Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Как показала практика, использование em или % удобнее чем пункты и пиксели.
Таблица соотношений
| Пункт, pt | Пиксель, px | Единица, em | Процент,% |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Остались вопросы? Задавайте их в комментариях.
Возможно Вас также заинтересует…
Должен ли я использовать pt или px?
pt-это вывод (аббревиатура) «точки», который исторически использовался в Гранях типа печати, где размер обычно «измерялся» в «точках», где 1 точка имеет приблизительное измерение 1/72 дюйма, и, таким образом, 72-точечный шрифт будет размером 1 дюйм.
px-это аббревиатура для «пикселя», который представляет собой простую «точку» на экране или матричном принтере или другом принтере или устройстве, которое отображает точечным способом-в отличие от старых пишущих машинок, которые имели фиксированный размер, твердый ударник который оставил отпечаток характера путем отжимать на тесемке, таким образом выходя изображение фиксированного размера.
тесно связаны с точкой термины «верхний регистр» и «нижний регистр», которые исторически были связаны с выбором фиксированных типографских символов, где «captital» символы, помещенные в поле (регистр) выше некаптитализированных символов, которые были помещены в поле ниже, и, следовательно, «нижний» регистр.
были разные коробки (случаи) для разных типографских шрифтов и размеров, но все же и «верхний» и «нижний» регистр для каждого из них.
другой термин — «pica», который является мерой одного символа в шрифте, таким образом, pica составляет 1/6 дюйма или 12 единиц измерения (12/72) меры.
Strickly говоря, измерение на компьютерах 4.233 мм или 0,166, в то время как старый пункт (американский) равен 1/72.27 дюйма и французский 4,512 мм (0,177 дюйма.). Таким образом, мое утверждение » приблизительное» что касается измерений.
далее, пишущие машинки, используемые в офисах, имели либо «элитный», либо «пика» размер, где размер был 10 и 12 символов на дюйм.
кроме того,» точка», до стандартизации была основана на металлических типографах» фут » размер, размер основного следа одного символа, и несколько варьировался в размере.
обратите внимание, что типографская «нога» была первоначально от умершего принтера фактической ноги. Ля типографская нога содержит 72 picas или 864 пункта.
Что касается использования CSS, я предпочитаю использовать EM, а не px или pt, тем самым получая преимущество масштабирования без потери относительного местоположения и размера.
EDIT: просто для полноты вы можете думать об EM (em) как об элементе измерения высоты одного шрифта, таким образом, 1em для шрифта 12pt будет высотой этого шрифта, а 2em будет вдвое больше высоты. Обратите внимание, что для шрифта 12px 2em составляет 24 пикселя. Так 10px типично 0.63 em a стандартный шрифт как» большинство » браузеров базируется на 16px = 1em как стандартный размер шрифта.
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), и наоборот.
Но в целом для отображения на экране и для печати лучше использовать разные наборы единиц измерения. Советы по использованию единиц собраны в следующей таблице:
| Рекомендуются | Можно иногда | Не рекомендуются | |
|---|---|---|---|
| Экран | em, px, % | ex | pt, cm, mm, in, pc |
| Печать | em, cm, mm, in, pt, pc, % | px, ex |
Соотношение между абсолютными единицами таково: 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 года многие браузеры уже их поддерживали.
Преобразование points в pixels, ems или в проценты в CSS
Чтобы узнать, сколько пикселей будет шрифт размером в 10 пунктов, можно воспользоваться таблицей преобразования points в pixels, ems или проценты.
Это несколько приблизительные значения, так как на самом деле величина кегля зависит от шрифта, браузера и операционной системы, но все-таки является хорошей отправной точкой и будеп полезна веб-дизайнерам при создании макетов сайтов и веб-разработчикам в процессе сборки сайта, прописывая свойства CSS.
Кстати, если в макете дизайна сайта, сделанного в Фотошопе, разрешение файла 72 точки на дюйм, то размер шрифта 12 пунктов в Фотошопе будет соответствовать 12 пикселям в каскадной таблице стилей CSS.
Таблица преобразования points в pixels, ems или проценты
| Points | Pixels | Ems | Проценты |
|---|---|---|---|
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Понравилась статья? Поделиться с друзьями:
Чем отличаются px от em
Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
В этой статье я хочу попытаться разобраться чем же отличаются px от em. Итак.
px (пиксели)
Это самая базовая, абсолютная и окончательная единица измерения.
Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.
Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.
Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.
Достоинства
Главное достоинство пикселя – чёткость и понятность
Недостатки
Проблема использования пикселей заключается в том, что IE считает пиксели абсолютным значением и не масштабирует текст, с размером шрифта, указанным в пикселях. Поэтому принято использовать em. Задание размеров блоков в em позволяет создавать масштабируемый дизайн, изменяющийся в зависимости от размера шрифта.
Принято использовать для задания размеров блоков.
em (вычисляемая единица)
Значения указанные в em, ведут отсчет от базового размера шрифта браузера (16px), т.е. по умолчанию 1em=16px. Для удобства использования em, базовый размер шрифта сначала сбрасывают до 10px, когда 1em=10px, а 0,1em=1px. Для сброса базового размера шрифта используйте следующее правило:
body { font-size: 62.5%; }И учитывайте, если для какого-то блока будет указан размер шрифта, например, 1.6em, то все его потомки за базовое значение будут брать уже не 10px, а 16px(1.6em). Для удобства расчета значений размера шрифтов в em’ах можно использовать вот этот сервис.
Принято использовать для задания размеров текста и/или блоков.
Достоинства
- Очень удобно и быстро меняются размеры всего.Если мы меняем значение элемента то каскадно поменяются все дочерние элементы.
- Если нужно, то дочерние элементы можно переопределить как обычно, в пикселях.
- Это очень удобно для изменения размера программно. Например, пользователь может изменить их в настройках.
- Очень удобно, и сохраняется качество шрифта при масштабировании размеров страницы.
- Случается так, что пользователи переопределят размер шрифты через браузер. Использование
em.
позволяет посетителю видеть и использовать масштабируемый текст при любом разрешении и на любом устройстве.
Недостатки
- Браузеры округлят не целое значение размера , что не сказывается при больших размерах, но на маленьких деталях можно увидеть неточность.
- В случае наследование значения em тоже наследуется, это может принести не мало хлопот.
- Конфликтует с препроцессорами(То есть,после компиляции не получиться динамически поменять значение
em). - При использовании transform: scale() элементы перекрывают друг друга.
Таблица соотношений px, pt, em %
| Пункт, pt | Пиксель, px | Единица, em | Процент,% |
| 6pt | 8px | 0.5em | 50% |
| 7pt | 9px | 0.55em | 55% |
| 7.5pt | 10px | 0.625em | 62.5% |
| 8pt | 11px | 0.7em | 70% |
| 9pt | 12px | 0.75em | 75% |
| 10pt | 13px | 0.8em | 80% |
| 10.5pt | 14px | 0.875em | 87.5% |
| 11pt | 15px | 0.95em | 95% |
| 12pt | 16px | 1em | 100% |
| 13pt | 17px | 1.05em | 105% |
| 13.5pt | 18px | 1.125em | 112.5% |
| 14pt | 19px | 1.2em | 120% |
| 14.5pt | 20px | 1.25em | 125% |
| 15pt | 21px | 1.3em | 130% |
| 16pt | 22px | 1.4em | 140% |
| 17pt | 23px | 1.45em | 145% |
| 18pt | 24px | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29px | 1.8em | 180% |
| 24pt | 32px | 2em | 200% |
| 26pt | 35px | 2.2em | 220% |
| 27pt | 36px | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40px | 2.45em | 245% |
| 32pt | 42px | 2.55em | 255% |
| 34pt | 45px | 2.75em | 275% |
| 36pt | 48px | 3em | 300% |
Похожие записи
Таблица продуктовений px, pt, em%
Главная > Web-верстка> Таблица доступных px, pt, em%Таблица производений px, pt, em%
| Пункт, пт | Пиксель, пикс | Единица, вм | Процент, % |
| 6pt | 8 пикселей | 0,5 эм | 50% |
| 7 точек | 9 пикселей | 0,55 эм | 55% |
| 7.5pt | 10 пикселей | 0,625 эм | 62,5% |
| 8pt | 11 пикселей | 0,7 эм | 70% |
| 9 пунктов | 12 пикселей | 0,75 эм | 75% |
| 10 точек | 13 пикселей | 0,8 ем | 80% |
| 10.5pt | 14 пикселей | 0,875 эм | 87,5% |
| 11 точек | 15 пикселей | 0.95em | 95% |
| 12 точек | 16 пикселей | 1em | 100% |
| 13pt | 17 пикселей | 1.05em | 105% |
| 13.5pt | 18 пикселей | 1,125 эм | 112,5% |
| 14pt | 19 пикселей | 1.2em | 120% |
| 14.5pt | 20 пикселей | 1.25em | 125% |
| 15pt | 21 пикс. | 1.3em | 130% |
| 16pt | 22 пикс. | 1.4em | 140% |
| 17pt | 23 пикс. | 1.45em | 145% |
| 18pt | 24 пикс. | 1,5 эм | 150% |
| 20pt | 26 пикселей | 1.6em | 160% |
| 22pt | 29 пикселей | 1.8em | 180% |
| 24pt | 32 пикс. | 2em | 200% |
| 26pt | 35 пикселей | 2.2em | 220% |
| 27pt | 36 пикселей | 2.25em | 225% |
| 28pt | 37 пикселей | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40 пикселей | 2.45em | 245% |
| 32pt | 42 пикс. | 2,55 эм | 255% |
| 34pt | 45 пикселей | 2,75 эм | 275% |
| 36pt | 48 пикселей | 3em | 300% |
Немного теории:
Пикселей (px): «px» имеют фиксированный размер единиц, которые используются на экране (например, для чтения на экране компьютера).Один пиксель равен одной точке на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального (безупречного до пикселя) представления своего сайта, желаемого в браузере. Одна из проблем, использование с px заключается в том, что эти единицы не используются для масштабирования слабовидящих устройств или мобильных устройств.
баллов (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1/72 дюйма. «Pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «Em» равно текущему font-size, например, если font-size в документе 12pt, 1em равно 12pt. «Em» масштабируема по своей природе, так 2em будет равно 24pt, 0.5em будет равно 6pt и т. д. Использование «em» становится все более популярным в веб-документах из-за масштабируемости и возможности с пользой использовать в мобильных устройствах.
Проценты (%): Единицы измерения в% похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равен 100% (т. Е. 12pt = 100%). При использовании «%» ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (доступность).
Как показала практика, использование em или% удобнее чем пункты и пиксели.
* информация бралась с сайтов
habrahabr.ru и sureshjain.wordpress.com
Понравилось это:
Нравится Загрузка …
Похожее
.Единицы измерения в CSS — px, pt, em% — Андрей Шарапов
Давно уже ищу информацию в интернете о системе измерения, таких как 0.75em = px? или Чему равенство 1em ?. Вот отличная табличка. Еще существует такое значение как Rem , но его в табличке пока нет.
пикселей
Пикселей (px): «px» имеют фиксированный размер единиц, которые используются на экране (например, для чтения на экране компьютера). Один пиксель равен одной точке на экране компьютера (самый малый элемент разрешения вашего экрана).Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального (безупречного до пикселя) представления своего сайта, желаемого в браузере. Одна из проблем, использование с px заключается в том, что эти единицы не используются для масштабирования слабовидящих устройств или мобильных устройств.
Очки
баллов (pt): «pt», используются традиционно в печатных СМИ (все, что должно быть напечатано на бумаге, и т. Д.). Один «pt» равен 1/72 дюйма.«Pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
Ems
«Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «Em» равно текущему font-size, например, если font-size в документе 12pt, 1em равно 12pt. «Em» масштабируема по своей природе, так 2em будет равно 24pt, 0.5em будет равно 6pt и т. д. Использование «em» становится все более популярным в веб-документах из-за масштабируемости и возможности с пользой использовать в мобильных устройствах.
процентов
Проценты (%): Единицы измерения в% похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равен 100% (т. Е. 12pt = 100%). При использовании «%» ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (доступность).
Как показала практика, использование em или% удобнее чем пункты и пиксели.
Таблица продуктовений
| Пункт, пт | Пиксель, пикс | Единица, в. | Процент, % |
| 6pt | 8 пикселей | 0.5em | 50% |
| 7 точек | 9 пикселей | 0,55 эм | 55% |
| 7.5pt | 10 пикселей | 0,625 ЭМ | 62,5% |
| 8pt | 11 пикселей | 0,7 эм | 70% |
| 9 точек | 12 пикселей | 0,75 эм | 75% |
| 10 точек | 13 пикселей | 0,8 эм | 80% |
| 10.5 пт | 14 пикселей | 0,875 эм | 87,5% |
| 11 точек | 15 пикселей | 0.95em | 95% |
| 12 точек | 16 пикселей | 1em | 100% |
| 13pt | 17 пикселей | 1.05em | 105% |
| 13.5pt | 18 пикселей | 1,125 эм | 112,5% |
| 14 точек | 19 пикселей | 1.2em | 120% |
| 14.5pt | 20 пикселей | 1.25em | 125% |
| 15 точек | 21px | 1.3em | 130% |
| 16 точек | 22 пикс. | 1.4em | 140% |
| 17pt | 23 пикс. | 1.45em | 145% |
| 18pt | 24 пикс. | 1.5em | 150% |
| 20pt | 26 пикселей | 1.6em | 160% |
| 22 точки | 29 пикселей | 1.8em | 180% |
| 24pt | 32 пикс. | 2em | 200% |
| 26pt | 35 пикселей | 2.2em | 220% |
| 27pt | 36 пикселей | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40 пикселей | 2.45em | 245% |
| 32pt | 42 пикс. | 2.55em | 255% |
| 34pt | 45 пикселей | 2,75 эм | 275% |
| 36pt | 48 пикселей | 3em | 300% |
Остались вопросы? Задавайте их в комментариях.
Возможно Вас также заинтересует…
.Таблица продуктовений px, pt, em%
Пикселей (px) : «px» имеют фиксированный размер единиц, которые используются на экране (например, для чтения на экране компьютера). Один пиксель равен одной точке на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального (безупречного до пикселя) представления своего сайта, желаемого в браузере.Одна из проблем, использование с px заключается в том, что эти единицы не используются для масштабирования слабовидящих устройств или мобильных устройств.
Очки (pt) : «pt», используются традиционно в печатных СМИ (все, что должно быть напечатано на бумаге, и т. Д.). Один «pt» равен 1/72 дюйма. «Pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.
«Ems» (em) : «em» — это масштабируемая единица, которая используется в веб-документах.«Em» равно текущему font-size, например, если font-size в документе 12pt, 1em равно 12pt. «Em» масштабируема по своей природе, так 2em будет равно 24pt, 0.5em будет равно 6pt и т. д. Использование «em» становится все более популярным в веб-документах из-за масштабируемости и возможности с пользой использовать в мобильных устройствах.
Проценты (%): Единицы измерения в% похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий размер шрифта равен 100% (т. Е. 12pt = 100%).При использовании «%» ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (доступность).
| Пункт, пт | Пиксель, пикс | Единица, вм | Процент, % |
| 6pt | 8 пикселей | 0,5 эм | 50% |
| 7pt | 9 пикселей | 0,55 эм | 55% |
| 7.5 пт | 10 пикселей | 0,625 ЭМ | 62,5% |
| 8pt | 11 пикселей | 0,7 эм | 70% |
| 9pt | 12 пикселей | 0,75 эм | 75% |
| 10 точек | 13 пикселей | 0.8em | 80% |
| 10.5pt | 14 пикселей | 0,875 эм | 87,5% |
| 11pt | 15 пикселей | 0.95em | 95% |
| 12 точек | 16 пикселей | 1em | 100% |
| 13pt | 17 пикселей | 1.05em | 105% |
| 13,5 пт | 18 пикселей | 1,125 эм | 112,5% |
| 14pt | 19 пикселей | 1.2em | 120% |
| 14.5pt | 20 пикселей | 1.25em | 125% |
| 15pt | 21 пикс. | 1.3em | 130% |
| 16pt | 22 пикс. | 1.4em | 140% |
| 17pt | 23 пикс. | 1.45em | 145% |
| 18pt | 24 пикс. | 1.5em | 150% |
| 20pt | 26px | 1.6em | 160% |
| 22pt | 29 пикселей | 1.8em | 180% |
| 24pt | 32 пикс. | 2em | 200% |
| 26pt | 35 пикселей | 2.2em | 220% |
| 27pt | 36 пикселей | 2.25em | 225% |
| 28pt | 37px | 2.3em | 230% |
| 29pt | 38px | 2.35em | 235% |
| 30pt | 40 пикселей | 2.45em | 245% |
| 32pt | 42 пикс. | 2.55em | 255% |
| 34pt | 45 пикселей | 2,75 эм | 275% |
| 36pt | 48px | 3em | 300% |
Теги: %, em, pt, px, Единица, Пиксель, Процент, Пункт
.em, px, pt, cm, дюйм…
См. также оглавление со всеми советами.
На этой странице:
em , px , pt , cm , дюйм …
Указывать длину в CSS можно в разных категориях. Некоторые из них
пришли из типографской традиции, как пункт ( пт )
и пика ( шт. ), другие, напр. сантиметр ( см ) и дюйм ( см ), знакомы нам в повседневном
обиходе.Есть и «волшебная» единица, придуманная специально для
CSS: пикселей, . Значит ли это, что для разных свойств нужны
разные единицы?
Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.
Любые единицы измерения можно использовать где угодно. Свойство
со соответствием в пикселях (поле : 5px, )
допускает и значения в дюйммах или сантиметрах (запас :
1.2 дюйма; запас: 0,5см ) и наоборот.
. В целом изображение на экране и для печати лучше. использовать разные наборы измерения. Советы по использованию собраны в следующей таблице:
| Рекомендуются | Можно иногда | Не рекомендуются | |
|---|---|---|---|
| Экран | em, пикс,% | пр. | pt, см, мм, дюйм, шт |
| Печать | em, см, мм, дюйм, пт, шт,% | пикс, бывш. |
Соотношение между абсолютными единицами таково: 1in = 2.54см = 25,4 мм = 72 точки = 6 шт.
Если у вас есть под рукой линейка, можете проверить точность
своего устройства. Вот прямоугольник высотой 1 дюйм (2.54см):
↑
72pt
↓
Так называемые абсолютные единицы ( cm , mm , in , pt и pc ) в CSS означают то же самое, что и везде, но только если
у устройства качество достаточно высокое разрешение. На лазерном
принтере 1см должен быть точно равен 1 сантиметру.Но на разрешения низкого разрешения, вроде компьютерных экранов,
CSS этого не требует. И вправду, устройства разные и разные
реализации CSS норовят отображить их по-разному. Лучше оставить эти
устройства для устройств высокого разрешения, в частности для печати.
На компьютерных экранах и мобильных устройствах может получиться
не то, что ожидалось.
В прошлом требовал CSS, чтобы абсолютные единицы отображались правильно даже на компьютерных экранах.Но поскольку неправильных реализаций было больше, чем правильных, и никаких улучшений не предвиделось, в 2011-м CSS отказался от этого требования. Сейчас абсолютные правила обязаны работать правильно только при вывод на печать и на устройства высокого разрешения.
CSS не уточняет. разрешение ». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этим значениями.
Еще одна причина не использовать абсолютные единицы где-либо,
кроме печати: на разные экраны мы смотрим с разного расстояния.
1 сантиметр на экране настольного компьютера выглядит маленьким.
Но на самом деле это много прямо перед глазами — это много. Лучше
вместо них использовать относительные единицы, напр. выс. М. .
Единицы em и ex зависят от размера
шрифта и могут быть свои для каждого элемента в документе.Единица em — просто размер шрифта. В элементе, которому
задан шрифт в 2 дюйма, 1em и означает эти 2 дюйма. Указание размеров
(напр., для отступов) в em означает, что они
задаются относительно шрифта, и какой бы ни был шрифт
у пользователя — крупный (напр. на большом экране) или мелкий
(напр. на мобильном устройстве).
пропорциональными. Объявления наподобие текст-отступ:
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 не только одинаково выглядит независимо от устройства,
но и заведомо измеряется одной и той же величиной (совсем как
единиц c m , pt , mm , in и pc , как
объяснялось выше).
CSS также определяет, что растровые изображения (напр.
фотографии) по умолчанию в масштабе 1 пиксель
изображения на 1px. Фотография разрешение 600 на 400 будет 600px
шириной и 400px высотой.Тем самым пиксели фотографии привязываются
не к пикселям устройства вывода (которые могут быть очень мелкими),
а к единицам px . Это позволяет точно совмещать
изображения с элементами документа, при условии, что
вы используете в своих стилях единицы px , а не pt , cm и т.д.
Используйте em или px для шрифтов
Единицы пт (пункт) и шт (пика)
CSS получил наследство от печатного дела.Там традиционно
применялись эти и электронные единицы, а не сантиметры или дюйммы.
В CSS незачем использовать pt , пользуйтесь любым
единицей на свой выбор. Но есть хорошая причина
не использовать ни pt , ни других абсолютных
единиц, а использовать только em и px .
Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:
0.5pt, 1px, 1pt, 1,5 пикс., 2 пикс.
Если первые четыре линии выглядят одинаковыми (либо линия) в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точку мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего, вы видите эту страницу на качественном языке или бумаге на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза это ситуация до правки 2011 года — прим.перев.) .
Волшебная единица CSS, пикселей , часто бывает удачным
, особенно если нужно выровнять текст с картинками, либо
просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо
будет выглядеть четко.
Но размеры шрифтов еще лучше задавать в em . Идея
в том, чтобы 1) не задавать размер шрифта для элемента BODY
(в HTML), а использовать размер шрифта по умолчанию для устройства,
поскольку это наиболее удобный для читателя размер; и 2) указывать
размеры шрифта других элементов в em : h2
{размер шрифта: 2.5em} , чтобы h2 был в 2½ раза крупнее
основного шрифта страницы.
Единое место, где можно использовать pt (либо см или см ) для размера
шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт
был строго определенного размера. Но даже там чаще всего лучше
использовать размер шрифта по умолчанию.
Таким образом, единица px избавляет
от необходимости знать разрешение устройства.Независимо
от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или
1800 dpi), длина, указанная в виде целого числа px ,
всегда выглядит хорошо и везде достаточно похоже. Но что, если
мы хотим узнать разрешение устройства, например, чтобы
решить, можно ли использовать линию в 0.5px ?
Выход — проверить разрешение с помощью медиавыражений.
Подробности о медиавыражениях — за рамками этой статьи, но вот
небольшой пример:
div.mybox {border: 2px solid}
@media (минимальное разрешение: 2dppx) {
/ * Медиа с 2 или более точками на пиксель * /
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 {размер шрифта: 3em; margin-left: 0,333em} и новая версия:
p {margin-left: 1rem}
h2 {размер шрифта: 3em; margin-left: 1rem} Благодаря другим новым единицам стало указывать размеры
относительно окна пользователя.Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin ,
соответствующего меньшего из vw и vh .
И vmax (может догадаться, что она делает).
Горящие туры, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.
.