Должен ли я определять поля CSS в пикселях или ems? Зачем? Когда?
У нас есть файл CSS с некоторыми правилами, похожими на следующие:
.directory-result ul
{
margin-top: 20px;
width: 60em;
}
.about-text
{
margin-top: 1em;
margin-bottom: 1em;
}
Все работает нормально, но мы задаемся вопросом о несоответствиях между значениями margin-top. Один из них 20px, а другой - 1em.
С кем лучше всего поехать? Какие моменты я должен учитывать при принятии решения о том, что использовать? Спасибо.
Ответы
Ответ 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
.