Почему их вместо px?

Question

Я слышал, вы должны определять размеры и расстояния в вашей таблице стилей с помощью em, а не в пикселях. Поэтому вопрос заключается в том, почему я должен использовать em вместо px при определении стилей в CSS? Есть хороший пример, который иллюстрирует это?

Answer 1

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

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

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

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

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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

* { 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 раза больше размера шрифта.

Answer 4

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

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

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


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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 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 // может быть округлено браузером

Answer 8

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

Answer 9

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

Answer 10

Существует простое решение, если вы хотите использовать px для указания размера шрифта, но все же хотите удобство использования, предоставляемое em, поместив это в ваш файл 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 */
}

и т. Д.