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

Question

У нас есть CSS-файл с некоторыми правилами, похожими на следующие:

.directory-result ul
{
    margin-top: 20px;
    width: 60em;

}

.about-text
{
    margin-top: 1em;
    margin-bottom: 1em;
}

Все работает нормально, но нас интересует именно несоответствия между значениями margin-top.Один 20px, а другой 1em.

Какой лучше выбрать?Какие моменты я должен учитывать при принятии решения, какой использовать?Спасибо.

Answer 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.

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

Answer 5

Также здесь очень хороший урок:

px - em -% - pt - ключевое слово