CSS Font-Size: em или px

Мы перешли в ту эпоху Web-a когда можно, а иногда и нужно позволить пользователю подстроить сайт и приложение под себя. Так что, когда дело доходит до изменения размера управляющих компонентов а также при разных разрешениях экрана, имеется ввиду не только размер шрифта но и ширина/высота/радиус/внутренние и внешние отступы и т.д. Так как мы можем сделать это проще? Конечно же использовать em.

Использование, общепринятых px в данном случае, доставит немало хлопот. Например, размер шрифта задан у нас в N местах, при использовании медиазапросов придется писать кучу запросов для разного значения разрешения экрана…. НО, если использовать em то нужно поменять только одно значение в теге body и все значения перебьются. Удобно, не правда ли?

(em) — это масштабируемая единица измерения, которую использует в web. 1em равен текущему размеру шрифта, например, если font-size
в документе равен 20-ти пикселям 1em == 20px, а 5em == 100px соответственно.

 body{ font:2em/1.4 Arial; } @media (max-width: 970px) { body { font:1.2em/1.4 Arial; } } 

Иногда, сложность заключается в том что, значение 1 px != физическому значению пикселя экрана пользователя. «px» в CSS на самом деле не имеют ничего общего с экрана в пикселях. Ну и конечно же, подведем итоги.

Преимущества EM:

• Очень удобно и быстро меняются размеры всего.Если мы меняем значение элемента то каскадно поменяются все дочерние элементы.
• Если нужно, то дочерние элементы можно переопределить как обычно, в пикселях.
• Это очень удобно для изменения размера программно. Например, пользователь может изменить их в настройках.
• Очень удобно, и сохраняется качество шрифта при масштабировании размеров страницы.
• Случается так, что пользователи переопределят размер шрифты через браузер. Использование em.
  позволяет посетителю видеть и использовать масштабируемый текст при любом разрешении и на любом устройстве.

Недостатки EM:

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

   ul li{
   font-size:1.1em;
   }
   ul li li{
   /*Будет равна 1.1em от родительского li*/
   }
  

• Конфликтует с препроцессорами(То есть,после компиляции не получиться динамически поменять значениеem ).
• При использовании transform: scale() элементы перекрывают друг друга.

Использовать em или нет — решать вам.