Почему нужно задавать в em, а не px?

Question

[modfop]

Почему размеры для блоков, чьи размеры зависят от содержащегося в них текста, нужно задавать в em, а не px? И ничего если соседние блоки в px, а этот блок в em?

Answer 1

[Евгений Петров]

Вопрос в такой постановке не имеет ответа в принципе.
Размеры бывают разными. Например — внешние и внутренние отступы.
И откуда нам знать, что там с соседними блоками?

И вот на тему, почему не надо задавать в em то, что не нужно задавать в em:
Как исправить разные отступы у Chrome (с включенным DirectWrite API)?

Answer 2

[Анна Бакурова]

есть хорошая статейка на хабра от себя хочу добавить, что для меня важны три пункта:
1) гибкое изменение при адаптации (меняем только значение body)
2) можно менять шрифт в ie8 (некоторые заказчики требуют это)

3) px не равен пикселю физическому (иначе мы бы не могли заавать 11.3px для попиксельной вёрстки)

Конечно те кто не продумывает план вёртки и не думает о наследовательности (или постоянно ломает её) им будет сложно работать с em.

Comments

[Евгений Петров]

Пиксель в CSS не равен физическому пикселю, а не пикселю экрана.
А разрешение экрана полностью соответствует пикселям в CSS.

[Анна Бакурова]

@Petroveg исправила...

[Анна Бакурова]

@Petroveg конечно физический... а как кстати на экране отображается не полный пиксель из css? или он его округляет?

[Евгений Петров]

@Libris округление до целого или смягчение границ (альясинг, сглаживание) происходило всегда — давно появилась возможность менять разрешение экрана (ведь количество триад при этой процедуре не меняется, не так ли?:). Просто эти приёмы стали изощрённее. Стоит отметить, что алгоритмы расчёта могут отличаться для разных случаев (элементы и фоновые изображения), а уж в части шрифтов там вообще всё сложнее и круче.

Достаточно попробовать задать дробную часть ширины блоков. Произойдёт округление, причём если блоки представляют часть размерной цепочки, то округление сильно усложняется. При масштабировании (системном или CSS) округление происходит заново. Для шрифтов сглаживание работает совершенно по-другому, и для них дробные части проявляются всегда.

Однако, в статьях речь идёт про другое. В спецификации по-прежнему указано, что px = .75pt, что вытекало из борьбы двух концепций — 72ppi (что было крайне удобно для полиграфии) и 96ppi. В CSS2.1 описано, что пиксель отныне сам по себе и не связан с абсолютной величиной. Тем не менее, этот архаизм остался. Как обычно, чтобы не дай бог не испортить вид созданных говнокодерами документов, задающих экранные размеры в типографских единицах.

Разговор про пиксель всегда имеет смысл в связке с разрешающей способностью человеческого глаза, которая если память не изменяет, колеблется в районе 30'' – 2', а усреднённая равно 1' (одной минуте). Вот от неё и пляшут в расчётах. Например, в спецификации CSS2.1 считали, что расстояние до наблюдателя примерно равно средней длине вытянутой руки (28 дюймов), от которой и отталкивались при расчёте пикселя. Очевидно, что для проекционных устройств с расстоянием до наблюдателя в 10 метров пиксель не может быть равен /75pt, и вот про это и говорится в картинках и объяснениях.

Мобильные устройства, для которых примерно ясен контекст в части расстояния глаза от экрана максимальное разрешение, превышать которое не имеет смысл, колеблется (по причине разной разрешающей способности глаза) в районе 200–500 ppi. Эта связь закреплена в названии Retina. К слову, увеличение ppi — серьёзная задача для мобильных, где львиная доля энергии тратится на свечение пикселей, поэтому не стоит ожидать появления устройств с ppi больше, чем 400 — нет никакого смысла.

[Анна Бакурова]

@Petroveg благодарю за информацию, можно ещё пару ссылок на источники, чтобы подробнее почитать.

[Евгений Петров]

@Libris вот про историю стандартов PPI и про соотношение вертикального и горизонтального размера пикселя. Там же про logical PPI и physical PPI. Вот ещё немного истории.

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

На всякий случай ссылка на ретину:) Ну а ссылки на спецификации CSS приводить как-то даже глупо — они же в статьях есть.

Answer 3

[Юрий Лобанов]

Типографа из Вас не выйдет ) они задаются противоположным вопросом: «Как можно задавать текстовому элементу размеры не в типографских единицах?»
В общем, почитайте про типографские единицы измерения, в частности про кегельную, и все поймете.