Разница между «px», «em» и «rem»
px
Пиксель задаёт точный размер элемента и размер шрифта.
Отображаемое количество пикселей на экране задаётся в настройках монитора. Т.е. если у монитора будет задан размер «1280x720», то элемент с шириной в «1280px» будет на всю ширину экрана.
em
Единица измерения «em» задаёт размер текста в зависимости от его текущего размера. Например, размер «2em» означает, что текущий текст надо сделать в два раза больше.
<p>Обычный текст. <span style="font-size: 2em">Текст в em</span>.</p>
Код выше покажет следующий текст.
Обычный текст. Текст в em.
Размер зависит от текущего размера шрифта. Т.е. вложенная «2em» снова увеличит текст в два раза.
<p> Обычный текст. <span style="font-size: 1.5em"> Текст в <span style="font-size: 1.5em">em</span> </span> </p>
Результат.
Обычный текст. Текст в em
rem
Единица измерения «rem» изменяется в зависимости от размера текста, заданного в теге <html>.
html { font-size: 14px; }
По коду выше, «1rem» будет равнятся «14px», а «2rem» будет равняться «28px».
<p> <span style="font-size: 2rem"> Текст в <span style="font-size: 2rem">em</span> </span> </p>
В коде выше «2rem» будет равняться «28px». Вложенный элемент с «2rem» также будет равняться «28px», т.к. размер «rem» зависит не от текущего текста, а от размера, заданного в <html>.