Ответ 1

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

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

Использование px для определения ширины

Вот пример иллюстрации. Скажем, у нас есть div-тег, который мы хотим превратить в стильное поле даты, у нас может быть HTML-код, который выглядит так:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Простая реализация определяла бы ширину класса date-box в px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Проблема

Однако, если мы хотим изменить размер текста в нашем браузере, дизайн сломается. Текст также будет кровоточить за пределами коробки, что почти то же самое, что происходит с SO-дизайном, как указывает Flodin. Это связано с тем, что поле будет иметь тот же размер по ширине, что и для 50px.

Вместо использования em

Более разумным способом является определение ширины в ems:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

Таким образом, у вас есть жидкий дизайн в окне даты, то есть размер окна будет размер вместе с текстом пропорционально размеру шрифта, определенному для окна даты. В этом примере размер шрифта определяется в * как 10pt и будет увеличиваться в 2,5 раза до этого размера шрифта. Поэтому, когда вы определяете шрифты в браузере, размер окна будет в 2,5 раза больше размера шрифта.

Ответ 2

Неверно сказать, что один из них лучший выбор, чем другой (или оба не получили бы своей цели в спецификации). Возможно даже стоит отметить, что StackOverflow широко использует единицы px. Это был не тот плохой выбор, который сказал Спайк.

Определение единиц

• px является абсолютной единицей измерения (например, in, pt или cm), которая также составляет 1/96 единицы в единицах (больше о том, почему позже). Поскольку это абсолютное измерение, оно может использоваться в любое время, когда вы хотите определить что-то конкретным размером, а не пропорционально другому, например размер окна браузера или размер шрифта.

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

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

  Все абсолютные измерения жестко связаны друг с другом; то есть 1in всегда 96px, так же как 1in всегда 72pt. (Обратите внимание, что 1in практически никогда не является физическим дюймом, когда речь идет о средах на основе экрана). Все абсолютные измерения предполагают номинальное разрешение экрана 96ppi и номинальное расстояние просмотра настольного монитора, и на таком экране один пиксель будет равен одному физическому пикселю на экране, а один из них будет равен 96 физическим пикселям. На экранах, которые значительно различаются по плотности пикселей или расстоянию до просмотра, или если пользователь увеличил страницу с помощью функции масштабирования браузера, px больше не обязательно будет относиться к физическим пикселям.

• em не является абсолютной единицей - это единица, которая относится к выбранному в данный момент размеру шрифта. Если вы не переопределили стиль шрифта, установив размер шрифта с абсолютной единицей (например, px или pt), на это повлияет выбор шрифтов в браузере пользователя или ОС, если они их сделали, поэтому это не имеет смысла использовать em как общую единицу длины, за исключением случаев, когда вы специально хотите, чтобы она масштабировалась по шкале размера шрифта.

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

• % также является относительной единицей, в данном случае, относительно высоты или ширины родительского элемента. Они являются хорошей альтернативой единицам px для таких вещей, как общая ширина дизайна, если ваш дизайн не зависит от конкретных размеров пикселей, чтобы установить его размер.

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

Ответ 3

У меня есть небольшой ноутбук с высоким разрешением и должен запускать Firefox в 120% текстовом увеличении, чтобы читать без косички.

У многих сайтов есть проблемы с этим. Макет становится все искаженным, текст в кнопках разрезан пополам или полностью исчезает. Даже stackoverflow.com страдает от этого:

Обратите внимание, как верхние кнопки и вкладки страниц перекрываются. Если бы они использовали em-единицы вместо px, не было бы проблем.

Ответ 4

Главный голосовой ответ здесь от thomasrutter прав в его ответе о em. Но очень сильно ошибается размер пикселя. Поэтому, даже если он старый, я не могу позволить ему быть undebated.

Экран компьютера обычно НЕ 96dpi! (Или ppi, если вы хотите быть педантичным.)

У пикселя НЕ установлен фиксированный физический размер.
(Да, он фиксируется только на одном экране, но на следующем экране пиксель скорее всего больше или меньше, и, конечно, НЕ 1/96 дюйма).


Proof
Нарисуйте линию длиной 960 пикселей. Измерьте его с помощью физической линейки. Это 10 дюймов? Нет?..
Подключите ноутбук к телевизору. Является ли линия 10 дюймов сейчас? Еще не?
Покажите строку на вашем iPhone. Все тот же размер? Почему бы и нет?

Кто из черт изобрел микс экрана компьютера 96dpi?
(Некоторые религии действуют с мифом о 72dpi, но в равной степени ошибаются.)

Ответ 5

Он используется для всего, что должно масштабироваться в соответствии с размером шрифта.

Это особенно полезно в браузерах, которые реализуют масштабирование путем масштабирования размера шрифта. Поэтому, если вы размер всех элементов с помощью em, они масштабируются соответственно.

Ответ 6

Поскольку em (http://en.wikipedia.org/wiki/Em_(typography)) прямо пропорционален используемому в данный момент размеру шрифта. Если размер шрифта, скажем, 16 пунктов, один em - 16 баллов. Если размер шрифта 16 пикселей (примечание: не то же самое, что и точки), то один из них - 16 пикселей.

Это приводит к двум (связанным) вещам:

• легко сохранить пропорции, если вы позже измените размер шрифта в своем CSS.
• Многие браузеры поддерживают пользовательские размеры шрифтов, переопределяя ваш CSS. Если вы создадите все в пикселях, ваш макет может сломаться в этих случаях. Но, если вы используете ems, эти проблемы должны устранять эти проблемы.

Ответ 7

Пример:

код: body {font-size: 10px;}//сохраняем на 10 всех размеров ниже правильного значения, измените это значение, а остальное измените, например. 1.4 этого значения

1 {font-size: 1.2em;}//12px

2 {font-size: 1.4em;}//14px

3 {font-size: 1.6em;}//16px

4 {font-size: 1.8em;}//18px

5 {font-size: 2em;}//20px

...

тело

1

2

3

4

5

изменяя значение в теле, остальные изменения автоматически меняются как базовое значение...

10 × 2 = 20 10 × 1,6 = 16 и т.д.

у вас может быть базовое значение как 8px... так 8 × 2 = 16 8 × 1.6 = 12.8//может быть округлено браузером

Ответ 8

Очень практичная причина заключается в том, что IE 6 не позволяет изменять размер шрифта, если он задан с помощью px, тогда как он используется, если вы используете относительную единицу, такую ​​как em или проценты. Не позволяя пользователю изменять размер шрифта, очень плохо для доступности. Несмотря на то, что в упадке все еще есть много пользователей IE 6.

Ответ 9

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

Ответ 10

Основная причина использования em или процентов - позволить пользователю изменять размер текста без нарушения дизайна. Если вы создаете шрифты, указанные в px, они не изменяют размер (в IE 6 и другие), если пользователь выбирает размер текста - больше. Это очень плохо для пользователей с визуальными недостатками.

В нескольких примерах и статьях о таких конструкциях (на выбор есть множество), см. последний выпуск A List Apart: Жидкостные решетки, более старая статья Как размер текста в CSS или Dan Cederholm Пуленепробиваемый веб-дизайн.

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

Насколько я лично презираю IE6, в настоящее время это единственный браузер, одобренный для большинства пользователей нашей компании Fortune 200.

Ответ 11

Существует простое решение, если вы хотите использовать px для указания размера шрифта, но по-прежнему хотите использовать его, используя их в своем файле CSS:

body {
  font-size: 62.5%;
}

Теперь укажите теги p (и другие):

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

И так далее.

Ответ 12

Для чего это стоит, здесь определение для разных единиц в CSS: http://www.w3.org/TR/css3-values/#lengths.

Ответ 13

Вероятно, вы захотите использовать em для размеров шрифта до тех пор, пока IE6 не исчезнет (с вашего сайта). Px будет в порядке, когда масштабирование страницы (в отличие от масштабирования текста) станет стандартным поведением.

Traingamer уже предоставил необходимые ссылки.

Ответ 14

когда вы создаете адаптивную тему, вы можете обрабатывать все размеры элементов, используя ems вместо px. Вам просто нужно изменить размер шрифта.

Ответ 15

Общий консенсус заключается в том, чтобы использовать проценты для размера шрифта, поскольку он более согласован между браузерами/платформами.

Это смешно, хотя я всегда использовал pt для определения размера шрифта, и я предположил, что все используемые им сайты. Обычно вы не используете размер пикселей в других приложениях (например, Word). Я думаю, это потому, что они предназначены для печати, но размер такой же в веб-браузере, что и в Word...