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

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

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

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

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

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

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

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

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

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

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

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

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

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

Причина, по которой я задал этот вопрос, заключалась в том, что я забыл, как использовать их, так как какое-то время я радостно хакал в 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.

Используя их вместо

Более разумный способ - определить ширину в 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 раза больше размера шрифта.

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

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

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


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

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

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

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

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

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

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

пример:

Code: 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;} // 20 пикселей

...

тело

1

2

3

4

5

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

10 × 2 = 20 10 × 1,6 = 16 и т. Д.

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

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

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

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

Несколько примеров и статей по подобным конструкциям (есть множество вариантов выбора) см. В последнем выпуске A List Apart: Fluid Grids , в старой статье « Как определить размер текста в CSS» или в « Bulletproof Web Design» Дана Седерхольма .

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

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

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

И так далее.

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

Traingamer уже предоставил необходимые ссылки .

Пиксель является абсолютной единицей, тогда как rem / em являются относительными единицами. Для получения дополнительной информации: https://drafts.csswg.org/css-values-3/

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

В этом случае, если веб-страница открыта в Google Chrome, размер шрифта для элемента HTML задается Chrome, попробуйте изменить его, чтобы увидеть влияние на веб-страницы со шрифтами модулей rem / em.

Если вы используете pxв качестве единицы для шрифтов, размер шрифтов не изменится, тогда как шрифты с rem/em unit изменят размер при изменении размера шрифта системы.

Поэтому используйте, pxкогда вы хотите, чтобы размер был фиксирован, и используйте rem/, emкогда вы хотите, чтобы размер был адаптивным / динамическим к размеру системы.

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

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

Избегайте em или px, используйте rem вместо этого, потому что легче найти вычисленное значение. Но между em и px px лучше, потому что их сложно отлаживать.