CSS em против px (ошибки округления)

Question

Я работал над личным веб-сайтом (поэтому время здесь не проблема), и я создал базовую таблицу стилей, в которой я забочусь обо всех размерах шрифта, ширине границ, высоте строк и тому подобном.Я приложил все усилия, чтобы использовать ems полностью, но когда я тестировал веб-сайт в других браузерах (например, Chromium), контент не соответствовал моей "идеальной по пикселям" сетке.

Итак, мой вопрос здесьтакое, я должен использовать вместо этого px?Я имею в виду, я знаю, что ems - это «путь», но в настоящее время большинство браузеров реализуют полноразмерное масштабирование (они не меняют размер только текста), и когда дело доходит до работы с шириной границы и высотой строки, px удобнеепотому что я могу вообще избежать субпиксельного округления.

Что вы думаете об этом?(кстати, поддержка IE - не одна из моих целей; мне наплевать на это)

Answer 1

Я бы использовал em только для элементов, размер которых зависит от размера шрифта.

Такие элементы, как границы (и его ширина), обычно не зависят от размера шрифта.

Answer 2

содержимое не соответствует моей "идеальной по пикселям" сетке.

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

Answer 3

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

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

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

Для борьбы с этим я использовал rem на родительском уровне, чтобы установить размер шрифта, и обнаружил, что это позволяет родителям и потомкам работать с одинаковым базовым относительным значением.