Почему для разных экранов шрифт 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
1) использовать в CSS медиа-запросы @media (max-width: 768px)например
И, да. Не расширения разные, а разрешения разные. У монитора - разрешение. У файла - расширение.