Для чего лучше использовать em, rem, % и px?

Если простыми словами:

• px - для всех видов верстки и на все времена;
• % - для верстки резиновых макетов (16px = 100%);

• rem - для адаптивной верстки, когда задается всему документу шрифт

  html { font-size: 16px; } и от него отталкиваются все размеры (1rem = 16px) ,
  для @media screen and (max-width: 768px) { html { font-size: 12px; } - соответственно на мобильных девайсах все дружно будет в меньших размерах, не придется для каждого переписывать размеры;

• em - то же самое что и rem, но размер зависит не от html , body а от шрифта родительского блока ( 1em = значению font-size родителя).
• Есть еще vw, vh - современные единицы (1vw = 1% от ширины окна, 1vh = 1% от высоты окна). Плюсы - шрифты масштабируются подобно svg с увеличением\уменьшением ширины экрана. Минусы - не всеми устр-вами и браузерами поддерживается caniuse.

Все единицы измерения обладают своими плюсами для своих нужд. Минусов для px не вижу, для относительных единиц rem,em - пересчет из пикселей (в макетах размеры в px, а нужно посчитать сколько это будет в относительных ед.).

Конкретно для ретина дисплеев единиц измерений к счастью нет, как и каких-то рекомендация\указаний. Тут действует тот же правило какой макет и верстка: резиновая, адаптивная, фиксированная.

Почитать подробнее:

1. w3.org
2. webref.ru
3. w3schools
4. developer.mozilla.org

P.S: Все зависит от личных предпочтений, любым из видов ед. измерений можно верстать любой макет, задавать размер шрифта и прочие размеры блоков.