Почему em вместо px?

Question

Почему em вместо px?

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

684 14

css units-of-measurement em

14 ответов:

Comments

Ничего не найдено.

thomasrutter · Accepted Answer · 2018-07-11 09:17:02

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

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

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

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

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

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

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

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

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

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

flodin · Accepted Answer · 2015-07-27 12:47:50

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

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

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

Spoike · Accepted Answer · 2018-07-11 09:20:22

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

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

использование 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, как флодин указывает. Это связано с тем, что поле останется того же размера по ширине, что и заблокировано в 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 раза больше размера этого шрифта.

Vbakke · Accepted Answer · 2013-06-02 02:09:13

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

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

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

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

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

Daniel Rikowski · Accepted Answer · 2017-01-24 12:59:27

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

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

Henrik Paul · Accepted Answer · 2009-03-04 09:18:05

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

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

это легко сохранить пропорции, если вы решите изменить размер шрифта в вашем CSS позже.

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

Muhammad Usman Ghani · Accepted Answer · 2014-04-18 08:51:40

пример:

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

1{размер шрифта: 1.2 em;} / / 12px

2{размер шрифта: 1.4 em;} / / 14px

3{размер шрифта: 1.6 em;} / / 16px

4{размер шрифта: 1.8 em;} / / 18px

5{размер шрифта:2em;} //20px

...

тело

1

2

3

4

5

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

10×2=20 10×1.6=16 etc

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

John Topley · Accepted Answer · 2009-03-04 09:30:15

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

Scott Evernden · Accepted Answer · 2009-03-04 09:13:50

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

Traingamer · Accepted Answer · 2009-03-04 21:54:07

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

для нескольких примеров и статей о проектах, подобных этому (есть множество на выбор), см. Последний выпуск списка отдельно:жидкость Сетки старые статьи как размер текста в CSS или Dan Cederholm это Пуленепробиваемый Веб-Дизайн.

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

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

Anonymous Coder · Accepted Answer · 2011-05-11 07:20:05

существует простое решение, если вы хотите использовать 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 */
}
и так далее.

Ryan · Accepted Answer · 2013-06-11 17:23:12

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

user73912 · Accepted Answer · 2017-05-23 15:18:24

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

Traingamer уже предоставил соответствующие ссылки.

DisgruntledGoat · Accepted Answer · 2009-03-06 02:40:43

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

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