Разница между px и em

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

Ответ 1

См. отличный учебник по CSS-Tricks:

Ответ 2

Знакомьтесь с единицами

"Ems" (em): "em" - это масштабируемая единица, которая используется в веб-документе СМИ. Значение em равно текущему размеру шрифта, например, если размер шрифта документа составляет 12pt, 1em равно 12pt. Эмс масштабируемый по своей природе, поэтому 2em будет равен 24pt,.5em будет равен 6pt, и т.д. Ems становится все более популярным в веб-документах из-за масштабируемость и удобство использования мобильных устройств.
Пиксели (пикселы): пиксели - это блоки фиксированного размера, которые используются на экране носителя (то есть для чтения на экране компьютера). Один пиксель равен на одну точку на экране компьютера (наименьшее разделение вашего разрешение экрана). Многие веб-дизайнеры используют пиксельные блоки в Интернете документов, чтобы создать идеальное изображение в пикселях их сайт, как он отображается в браузере. Одна проблема с пиксельный блок состоит в том, что он не масштабируется вверх для слабовидящих читателей или вниз, чтобы соответствовать мобильным устройствам.
Баллы (pt): Точки традиционно используются в печатных СМИ (что-либо который должен быть напечатан на бумаге и т.д.). Одна точка равна 1/72 дюйм. Точки очень похожи на пиксели, поскольку они имеют фиксированный размер единиц и не может масштабироваться.
Процент (%): единица процента похожа на блок "em", за исключением несколько фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании процентов, ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

Итак, Whats the Difference?

Его легко понять разницу между единицами размера шрифта, когда вы видите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифтов позволяет увидеть, что происходит, когда вы увеличиваете размер базового шрифта (используя селектор CSS тела) от 100% до 120%

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

Em vs. Percent

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

В приведенном выше примере мы использовали процентную единицу в качестве нашего базового размера шрифта (на теге body). Если вы измените размер базового шрифта от процента к ems (т.е. Body {font-size: 1em;}), вы, вероятно, не заметите разницы. Давайте посмотрим, что произойдет, когда "1em" - это размер нашего тела, и когда клиент изменяет настройку "Размер текста" своего браузера (это доступно в некоторых браузерах, таких как Internet Explorer).

Когда размер текста браузера клиента установлен на "средний", между ems и процентами нет разницы. Однако, когда настройка изменена, разница довольно велика. В настройке "Самый маленький" ems намного меньше, чем процентов, а когда в настройке "Largest", это совсем наоборот, при этом ems отображается намного больше, чем процентов. В то время как некоторые могут утверждать, что единицы em масштабируются, поскольку они действительно предназначены, в практическом применении текст em масштабируется слишком резко, причем самый маленький текст становится едва различимым на некоторых клиентских машинах.

Информация взята из http://kyleschaeffer.com

Ответ 3

1 em = взять размер шрифта из вашего размера шрифта. Это относительный характер.

100% = размер шрифта также зависит от размера шрифта документа.

Общие

12pt = 1em = 100% = 16px

В Best Practice Используйте%, потому что это относительно вашей ширины, оно автоматически настроит устройство на устройство.

Ответ 4

Если вам нужна дополнительная информация о том, как люди рассчитывают базу на px и em, вы сами принимаете решение, вы можете просмотреть эту статью http://joomla2x.com/difference-px-em-web-htmlcss/