Почему для разных экранов шрифт em — разный?

В CSS есть несколько типов единц измерения. Вроде, px, em, % и rem. Наверное, ещё есть, но это - основное.
Более того, существую экраны 27 дюймов с разрешением 1280x720 пикселей. А существуют экраны 27 дюймов с разрешением 1920x1080. На втором текст будет меньше, чем на втором просто из-за количества пикселей на экране доступных.
На телефонах, обычно, браузеры принимают 1 пиксель за 2-4-8 пикселей реальных. Как-бы "увеличивают" страницу для более удобного восприятия человеком.

Статьи по теме:
https://getinstance.info/articles/css/css-font-sizing/
https://developer.mozilla.org/ru/docs/Web/CSS/@media

Давайте разбираться.
em - это размер шрифта родительского элемента.
У большинства браузеров шрифт по умолчанию 16px.
Предположим, что для контентного блока задан шрифт 1em и больше никаких правил для шрифта для родительских элементов не было и в браузере не установлен увеличенный или уменьшенный шрифт. Значит, размер шрифта будет 16px.
Мониторы бывают разного размера и с разным разрешением. Например, 13" ноут может быть с разрешением и 1920 и 1280 (не ограничиваясь этими размерами).
Соответственно, 16px будут выглядеть по разному на одном и том же мониторе при смене разрешения.

Вы можете задать размер шрифта (и не только шрифта) в vw. Но на мелких экранах ждет сюрприз: шрифт окажется очень мелким, возможно, даже и вовсе нечитаемым, хоть и будет соответствовать вашему требованию.