Должен ли я определять поля CSS в пикселях или ems? Зачем? Когда?

Ответ 1

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

px, а em - размер шрифта конкретного элемента. 1em означает одну строку шрифта, например. у вас есть поле с размером шрифта 12px, что означает, что 1em будет равно 12px

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

<p>Text</p>
<div class="box">
  <p>Lorem</p>
</div>

p {
  font-size: 1.2em;
}

.box {
  font-size: 1.2em;
}

В этом случае первый <p> будет иметь размер шрифта, равный основному размеру шрифта * 1.2, а второй <p> будет отображаться с размером шрифта * 1.2 * 1.2.

Ответ 2

Это просто два разных способа измерения. Em связан с размером шрифта (традиционно 1em - это примерно ширина буквы M в данном шрифте), а px - пиксели.

Если вы создадите все с помощью em, все будет масштабироваться соответствующим образом, когда пользователь отрегулирует свой размер шрифта (например, используя меню IE Page > Text Size). Это также облегчает работу с вертикальным ритмом.

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

Независимо от того, что вы делаете, убедитесь, что вы последовательно, - это облегчает жизнь в будущем.

Ответ 3

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

* (Это перестает иметь значение, если пользователь увеличивает масштаб страницы, вместо того, чтобы увеличивать размер текста (как сейчас по умолчанию в Firefox и Chrome, и является вариантом в IE).

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

Ответ 4

Также здесь очень хорошее углубленное руководство:

px - em -% - pt - keyword

Ответ 5

В этом примере directory-result ul представляет собой блок - некоторый вид списка/меню, где размеры пикселей весьма важны. Мы не можем всегда полагаться на em, который определяет размер текста, потому что если нам нужно пространство 20px из-за некоторого фонового изображения - ну, нам нужно 20px, никаких компромиссов.

Обратите внимание: вы не можете создавать и сохранять изображение, то есть 10-кратное, поэтому я не вижу причин, по которым я должен использовать разные единицы на веб-странице. Это просто создает путаницу, а затем очень сложно поддерживать макет.

Существует одно место, где целесообразно использовать em - я говорю о текстовых блоках. Im угадывание в вашем коде about-text помещается в другой текст, где добавление верхнего/нижнего поля 1em (высота текста) имеет смысл. Это похоже на любой текстовый редактор (т.е. Межстрочный интервал в MS Word) - текст лучше всего выглядит, когда расстояние между строками определяется путем умножения высоты текста

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

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