Я бы хотел знать, почему 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%;
Мне просто интересно, что я не мог найти в Интернете об этом, поэтому я задаю вопрос.
REM полезны почти везде, где размер задан явно.
С rem все размеры шрифта относятся к корневому элементу (он же html tag). Причина этого заключается в том, чтобы облегчить масштабирование для устройств. Технически вы можете изменить html-тег на меньший или больший размер, чтобы масштабировать все размеры шрифтов одинаково - это супер приятная функция.
... [T] Главное, что нужно отнять, - все динамично и относительно корневого тега HTML.
Например, измените размер шрифта html css на другое число... и посмотрите, как вся сетка корректируется и масштабируется.
Источник: Scotch.io
Стоит отметить, что Bootstrap 4 сохранял точки останова в px а не в em. Из документов:
В то время как Bootstrap использует ems или rems для определения большинства размеров, px используются для точек сетки и ширины контейнера. Это связано с тем, что ширина области просмотра указана в пикселях и не изменяется в зависимости от размера шрифта.