В чем разница между px, em и ex?

Question

В чем разница между px, em и ex? И когда вы определяете размер шрифта в CSS, вы используете px, pt или em?

Answer 1

em : font-size соответствующего шрифта
ex : x-height соответствующего шрифта
px : пиксели относительно устройства просмотра

Answer 2

1. Пиксели (px) зависят от браузера. Это абсолютный размер, который вы видите на экране.
2. Em вроде процентов. Em s относится к базовому размеру текста. Значение 1 em означает то же самое, что и значение 100 percent. Но вы также можете сказать это противоположным образом: процентное значение это просто em, умноженное на 100.
3. Точки (pt) - это то, что вы хотели бы использовать в печатных СМИ.

Answer 3

В чем разница px, em и ex?

http://www.w3.org/TR/CSS21/syndata.html#length-units описывает эти и другие единицы длины, доступные в CSS

При определении размера шрифта в CSS я использую px, pt или em?

Как правило, используйте проценты на экране и pt для печати. ​​

Answer 4

CSS Длина Единицы:

• Абсолют : дюймы ( в ), сантиметр ( см ), миллиметр ( мм ), точки ( pt) ), picas ( шт )

Точки являются стандартными типографскими измерениями, которые использовались принтерами и наборщиками на протяжении десятилетий и программами обработки текстов на протяжении многих лет. Традиционно, есть 72 точки на дюйм (точки были определены до широкого использования метрической системы). Следовательно, заглавные буквы текста с 12 точками должны быть высотой в одну шестую дюйма. Например, p {font-size: 18pt;} эквивалентно p {font-size: 0.25in;}.

Picas - еще один типографский термин. Пика эквивалентна 12 точкам, что означает, что есть 6 пиков на дюйм. Как только что показано, заглавные буквы текста, равные 1 пика, должны быть одной шестой дюйма в высоту. Например, p {font-size: 1.5pc;} установит текст того же размера, что и объявления примеров, найденные в определении точек.

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

• Относительный : em (em-height), ex (e-height), px . Первые два обозначают и «x-height», которые являются общими типографскими измерениями; однако в CSS они имеют значения, которые вы можете не ожидать, если знакомы с типографикой.

em : один «em» определен как значение font-size для данного шрифта. Если размер шрифта элемента равен 14 пикселям, то для этого элемента 1em равен 14 пикселям.

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

px : крошечные цветные рамки на мониторе - это пиксели. В общем, если вы объявляете что-то вроде font-size: 18px , веб-браузер почти наверняка будет использовать реальные пиксели на вашем мониторе, ведь они уже есть, но с другими устройствами отображения, такими как принтеры Пользовательский агент должен будет изменить размеры пикселей до чего-то более разумного . Другими словами, код печати должен выяснить, сколько точек в пикселе, и для этого он может использовать эталонный пиксель 96ppi.

Conclution

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

Ссылка: css определенный гид Эрика Мейера

Answer 5

em : em - это масштабируемая единица, используемая в веб-документе. Em равен текущему размеру шрифта, например, если размер шрифта документа равен 12pt, 1em равен 12pt.

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

pt : Точки традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге и т. Д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели в том, что они являются единицами фиксированного размера и не могут масштабироваться по размеру.