Стоит ли использовать единицы px или rem в CSS? [закрыто]

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

Однако поддержка rem имеет свои нюансы: в IE8 требуется полифил, а в Webkit наблюдаются ошибки. Более того, подсчет подпикселей может вызвать проблемы, например, исчезновение линий в один пиксель. Лекарством в данном случае будет использование пикселей для таких очень маленьких элементов, что в свою очередь приводит к дополнительной сложности.

Таким образом, в общем, задайте себе вопрос, действительно ли это оправдано — насколько важно и вероятно вам изменить "уровень масштабирования" всего документа через CSS?

В некоторых случаях это будет актуально, в других — нет.

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

Имейте в виду, что легко перейти (или, точнее, конвертировать) ваш CSS с px на rem (JavaScript — это уже другая история), потому что следующие два блока CSS кода дадут одинаковый результат:

html {
}

body {
  font-size: 14px;
}

.someElement {
  width: 12px;
}

html {
  font-size: 1px;
}

body {
  font-size: 14rem;
}

.someElement {
  width: 12rem;
}

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

Допустим, у вас есть такой код:

html {
    font-size: 12pt;
}

Тогда 1rem всегда будет равен 12pt. rem и em так же независимы от устройства, как и элементы, от которых они зависят; некоторые браузеры могут вести себя не по стандарту и обрабатывать px буквально. Даже в старые времена интернета 1 пункт всегда считался равным 1/72 дюйма — т.е. в дюйме 72 пункта.

Если у вас есть старый, несовместимый браузер, и вы используете такой код:

html {
    font-size: 16px;
}

то 1rem будет зависим от устройства. Для элементов, которые по умолчанию наследуют стили от html, 1em также будет зависимым от устройства. 12pt будет надеемся гарантированно независимым от устройства эквивалентом: 16px / 96px * 72pt = 12pt, где 96px = 72pt = 1in.

Ситуация может стать достаточно сложной, если вы хотите придерживаться конкретных единиц. Например, .75em от html = .75rem = 9pt, а .66em от .75em от html = .5rem = 6pt. Вот некоторые полезные правила:

• Используйте pt для абсолютных размеров. Если вам действительно нужно, чтобы это было динамично относительно корневого элемента, вы запрашиваете слишком много от CSS; вам нужен язык, который компилируется в CSS, как Sass/SCSS.
• Используйте em для относительных размеров. Очень удобно сказать: "Я хочу, чтобы отступ слева был примерно равен максимальной ширине буквы," или: "Сделайте текст этого элемента немного больше, чем окружающий." <h1> — хороший элемент для использования размера шрифта в em, поскольку он может появляться в различных местах, но всегда должен быть больше, чем ближайший текст. Таким образом, вам не нужно устанавливать отдельный размер шрифта для каждого класса, применяемого к h1: размер шрифта будет адаптироваться автоматически.
• Используйте px для очень маленьких размеров. При очень маленьких размерах pt может размываться в некоторых браузерах при 96 DPI, так как pt и px не совсем совпадают. Если вам просто нужно создать тонкую одно пиксельную рамку, скажите об этом. Если у вас дисплей с высоким DPI, это может быть неочевидно при тестировании, поэтому обязательно проверьте на стандартном дисплее 96 DPI в какой-то момент.
• Не используйте подсчеты под пиксели, чтобы сделать что-то необычное на дисплеях с высоким DPI. Некоторые браузеры могут это поддерживать — особенно на дисплеях с высоким DPI — но это плохая практика. Большинство пользователей предпочитают большие и четкие элементы, хотя веб-опыт научил нас, разработчиков, иного. Если вы хотите добавить больше деталей для пользователей с современными экранами, вы можете использовать векторную графику (например, SVG), что вообще лучшее решение.