Как грамотно использовать rem в адаптивной вёрстке?
Если говорить о мобильном, то если разрешения экрана у него Full HD, то это не значит что контент на нем будет отображаться так же как на десктопе с тем же разрешением. Для этого существует мета тег viewport.  Уменьшая размер шрифта для мобильного, ты уменьшаешь его не относительно 1920, а относительно 320px на минимальном для мобилок. Это я к тому что можно использовать просто пиксели для шрифта и выглядеть будет нормально. Просто регулируй в медиа-запросах и все
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /* 10px */
}

body {
  font-size: 200%; /* 20px */
}
Итак, поехали: теперь у нас есть 2 типа относительных единиц REM (10px) и EM (20px). REM - будет фиксирован во всём документе. EM - можно переопределить для конкретного блока. После того как весь макет будет свёрстан при помощи относительных единиц - достаточно просто будет адаптировать его под другие разрешения:@media all and (min-width: 1200px) {
  html {font-size: 39.0625%} /* 1200/1920 * 62.5 */
}

@media all and (min-width: 1440px) {
  html {font-size: 46.875%}
}

@media all and (min-width: 1600px) {
  html {font-size: 52.0833333333%}
}

@media all and (min-width: 1920px) {
  html {font-size: 62.5%}
}
Осталось только переопределить нужные блоки макета под разрешение