Почему при браузерном увеличении (ctr+scroll мыши) текст с величиной ex увеличивается больше, чем текст с величиной px?
ex - высота буквы x. А высота буквы x зависит от font-size.
Я создал блок wrap, указал ему font-size. Поместил в него 2 span - в первом размер шрифта не указал (т. о. он inherit от wrap), во втором указал 1ex.
При зуме или даже при отдалении шрифт в этих span меняется по разному. Почему?
Вот код на всякий случай:
https://jsfiddle.net/8tvnjycL/1/
оба подчиняются размеру от wrap на разных принципах
PX - Пиксель это 1 точка разрешения устройства вывода (монитора или экрана). Т. е. Если у вас разрешение монитора 1024*768 то вы имеете 1024 пикселя по горизонтали и 768 пикселей по вертикале. Т. е. размер пикселя напрямую зависит от разрешения устройства вывода и его технических характреристик.
EX - Этот аргумент определяется как высота символа «х» в нижнем регистре. Ex привязан к размеру шрифта заданного в браузере по умолчанию, если у родительского элемента задан атрибут «font-size» то он привязан к нему.
зачем кому-то подобные эксперименты? пиксели ведь от пендалей отличаем
без разницы будет это зум или просто увеличение шрифта, вместо 16 скажем 25
если сделать 1.8ex и эдак пикселей 20 родителя, то шрифты при увеличении будут примерно равными