Почему Bootstrap 4 выбирает rem и em вместо px?

Я бы хотел знать, почему Boostrap выбирает rem и em вместо px для новой версии Boostrap 4.

Мы можем видеть здесь

Некоторые примеры переменных:

    $font-size-h1: 2.5rem !default;
    $font-size-h2: 2rem !default;
    $font-size-h3: 1.75rem !default;
    $mark-padding: .2em !default;

Для хорошей практики используйте em и rem для:

  margin: 0;
  padding: 0;
  bottom: 0px;
  width: 100%;

Мне просто интересно, что я не мог найти в Интернете об этом, поэтому я задаю вопрос.

Ответы

Ответ 1

REM полезны почти везде, где размер задан явно.

С rem все размеры шрифта относятся к корневому элементу (он же html tag). Причина этого заключается в том, чтобы облегчить масштабирование для устройств. Технически вы можете изменить html-тег на меньший или больший размер, чтобы масштабировать все размеры шрифтов одинаково - это супер приятная функция.

... [T] Главное, что нужно отнять, - все динамично и относительно корневого тега HTML.

Например, измените размер шрифта html css на другое число... и посмотрите, как вся сетка корректируется и масштабируется.

Источник: Scotch.io

Ответ 2

Стоит отметить, что Bootstrap 4 сохранял точки останова в px а не в em. Из документов:

В то время как Bootstrap использует ems или rems для определения большинства размеров, px используются для точек сетки и ширины контейнера. Это связано с тем, что ширина области просмотра указана в пикселях и не изменяется в зависимости от размера шрифта.