Почему их вместо px?

766

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

Spoike
источник
Что бы это ни стоило, вот определение для различных модулей в CSS: w3.org/TR/css3-values/#lengths .
Райан

Ответы:

554

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

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

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

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

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

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

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

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

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

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

thomasrutter
источник
27
В этом контексте нет способа конвертировать между ems и пикселями, если вы не знаете, каков размер em в пикселях. Это может зависеть от унаследованного размера шрифта этого элемента, который, в свою очередь, может зависеть от размера шрифта документа в целом, что может зависеть от настроек размера шрифта в браузере пользователя и / или операционной системе. Если вы стремитесь к определенному размеру пикселя, укажите его в пикселях. Т.е., если вы хотите 990px, то поставьте 990px. Если вам нужны пиксели, почему бы не использовать их?
Томасруттер
7
А? Я не сказал ничего противоречащего этому. Я говорил, для чего используются px-единицы и для чего используются em-единицы. Похоже, вы подразумеваете, что использование px-единиц обычно плохо. Если сайт ломается при настройке размера шрифта браузера по умолчанию, ошибка не в пикселях, это неверные предположения. Очевидно, что веб-дизайнер полагался на размер шрифта по умолчанию (часто это хорошая идея) и все же создал остальную часть своего макета на основе ложных предположений об этом размере шрифта, таких как попытка выровнять графические элементы фиксированного размера с текстом, где Размер элемента соответствует только тексту с одним размером шрифта.
Томасруттер
3
Это не неправильно и не упрощено. Очевидно, что если вы используете em в строке, где фактически объявляете размер шрифта, то невозможно, чтобы em в этой строке относился к размеру шрифта того же элемента после любых объявлений размера шрифта для этого элемента, потому что он выиграл ' пока еще не знаю - поэтому вместо этого он должен быть относительно размера шрифта, который элемент имел бы до объявления свойства font-size в этом же элементе. Поскольку любое другое поведение буквально невозможно, я не вижу здесь никакой двусмысленности.
Томасруттер
3
@TalhaSayed, вы путаете пиксели с единицей px. Это не одно и то же - читайте спецификации CSS. Единица px - это абсолютная единица в том же смысле, что и единица измерения in, или единица измерения cm, или единица измерения pt.
Томасруттер
7
@thomasrutter, ВАУ! Я просто погуглил на это и да, должен сказать, что был неправ. Все эти годы я и понятия не имел. Раньше я думал, что 1 пиксель = 1 «точка на экране». Я думаю, что узнал что-то новое сегодня.
Талха Сайед
143

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

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

Снимок экрана Firefox при увеличении текста на 120%

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

Флодин
источник
15
Вы также можете масштабировать текст в Firefox, не увеличивая изображения в View -> Zoom -> Zoom Text Only, затем увеличивая изображение как обычно.
Томасруттер
4
+1 хороший момент. хотя в отношении больших разрешений вы можете настроить экран так, чтобы текст отображался с разрешением 120 т / д вместо стандартного разрешения 96
Spoike
5
@Spoike: Я бы хотел, но Firefox не поддерживает настройку DPI системы. См. Bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524
flodin
6
@Juan: Это потому, что они используют самый простой метод масштабирования: масштабирование всей страницы. Но это означает, что при 150% увеличении страница шириной 1000 пикселей становится шириной 1500 пикселей. Это самый простой способ увеличения для веб-разработчиков и браузеров. К сожалению, это не очень удобно. Вот почему другие браузеры имеют масштабирование текста, которое увеличивает контент только без изменения макета. Но это означает, что веб-разработчики должны в основном разрабатывать свои макеты для самых разных размеров шрифта, что сильно ограничивает возможности, которые вы можете выполнять в дизайне. Довольно сложно сделать сайт хорошо выглядящим как шрифтом 16pt, так и шрифтом 48pt.
Lèse Majesté
1
@Lesemajeste не масштабирует всю страницу, каким на самом деле должен быть «зум». Разве не наступает момент, когда разработчик должен сказать нишевым пользователям справиться или не посетить? Я бы никогда не построил ни одной страницы с учетом шрифта 16pt и 48pt. Это просто глупо и, как вы указали, очень ограничивает макет. Я думаю, это здорово, что FF хочет сделать специальный зум только для текста, но я не собираюсь проектировать с учетом этого.
1934286
93

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

Spoike
источник
1
Мне интересно: как он будет приспосабливаться к сеточным системам, используя проценты по ширине? Это сломает это, если contianing блоку дают ширину 100%?
Hugo der Hungrige 12.07.13
65
Это не правда в наше время. Нажатие Ctrl+и Ctrl-в любом современном браузере также масштабирует значения пикселей. Так было некоторое время.
ЙемСалат
1
@YemSalat Это справедливо и для настройки DPI в ОС?
angularsen
@anjdreas не знаю, если честно.
ЙемСалат
4
@spoike, понизить это, поскольку это явно уже не так, как сказано в комментарии YemSalat
RayLoveless
60

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

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


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


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

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

Vbakke
источник
4
> Чтобы получить представление о внешнем виде пикселя, представьте компьютерный монитор с электронно-лучевой трубкой 1990-х годов: наименьшая точка, на которой он может отображать, составляет около 1/100 дюйма (0,25 мм) или чуть больше. Устройство px получило свое название от этих пикселей экрана. - Цитата из W3C: w3.org/Style/Examples/007/units.en.html#units
Джей Зеленков
4
Все абсолютные измерения жестко связаны друг с другом; то есть 1in всегда * 96px *, так же как 1in всегда * 72pt *. (Обратите внимание, что 1 дюйм практически никогда не является физическим дюймом, когда речь идет об экранных носителях). Я не думаю, что голосование с наибольшим количеством голосов касается физического дюйма. Эти отношения относятся к разным схемам абсолютного определения размеров, например, in и pt. Например, Просто расширив свое «доказательство», если я нарисую линию 1_in_, она будет физически измерять 1 дюйм?
Saumitra R. Bhave
5
-1 за неправильную, неуместную напыщенную речь. pxизмеряется относительно контрольного пикселя , а не пикселей на экранах, о которых вы здесь. Возможно, вам это не понравится, но отстранение вашего правителя от этого не станет менее значимым фактом и не поможет ответить на вопрос. stackoverflow.com/questions/27382331/… "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
underscore_d
52

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

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

Даниэль Риковски
источник
97
В настоящее время все современные браузеры реализуют масштабирование путем одинакового масштабирования всех абсолютных единиц, а не только размеров шрифта. Обратите внимание, что этот ответ был написан в 2009 году, когда это было меньше, чем сейчас.
Томасруттер
22

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

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

  1. пропорции легко сохранить, если позже вы решите изменить размеры шрифта в своем CSS.
  2. Многие браузеры поддерживают нестандартные размеры шрифтов, переопределяя ваш CSS. Если вы создаете все в пикселях, в этих случаях ваш макет может сломаться. Но, если вы используете ems, эти переопределения должны смягчить эти проблемы.
Хенрик Пол
источник
Я просто искал формулу расчета :-) может быть, было бы неплохо добавить и обратный пример, например 2px, 0.125emдля 16-пиксельного шрифта.
Вольф
12

пример:

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 // может быть округлено браузером

Мухаммед Усман Гани
источник
3
Было бы лучше добавить изображение, которое иллюстрирует эффект.
Вольф
8

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

Джон Топли
источник
1
Обратите внимание, что IE7 и IE8 по- прежнему не могут изменить размер текста с размером шрифта, указанным в пикселях (через Page > Text Size). Тем не менее, IE7 добавил zoom ( Page > Zoom), который, очевидно, увеличивает всю страницу, включая текст.
Mercator
1
Лучше, чем Page> Zoon, попробуйте нажимать клавиши [CTRL] + [-] или [+] на клавиатуре в IE7 +, Chrome и Firefox - полное масштабирование страницы без большинства проблем, возникающих при попытке изменить размер шрифта.
Рич Тернер
1
Едва ли любой компьютер в мире использует IE6 в 2017 году
Майкл
3
@MichaelMay Следовательно, почему ответ и другие комментарии были написаны в 2009 году ... LOL
Chev
7

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

Скотт Эверден
источник
это так, но не соответствует минимальным требованиям WCAG 2.0: w3.org/WAI/WCAG20/quickref/Overview.php - достаточные методы для 1.4.4
meo
2

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

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

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

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

Traingamer
источник
1
+1 жидкостные сетки - это то, что я искал, когда задавал вопрос. (также, разве ваша компания не должна
переходить
Если вы спросите меня, они должны использовать Firefox, но на самом деле они не спрашивают меня. :-) (IE7 был бы лучше, чем 6, но я не причастен к принятию решений)
Traingamer
2

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

И так далее.

Анонимный кодер
источник
2
Разве это не сильно зависит от того, что никто не трогает пользовательские настройки CSS своего браузера?
Спойк
4
Да, вы должны просто установить font-size: 10px. css-tricks.com/forums/discussion/1230/…
m33lky
Я предпочитаю оставить размер шрифта: 100% и использовать миксины для определения значения em
gunnx
0

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

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

user73912
источник
0

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

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

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

введите описание изображения здесь

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

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

thisshri
источник
-1

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

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

DisgruntledGoat
источник
-2

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

Хуан Тамад
источник
Пожалуйста, добавьте некоторые дополнительные пояснения к вашему ответу, чтобы другие могли извлечь из него урок - тем более, что это действительно старый вопрос, на который уже собрано множество голосов
Нико Хаас