Относительные единицы em?

Question

[Breeze1]

Ребят помогите разобраться.

Вот например body у нас font-size: 16px на декстопе. У тега h1 у нас идет font-size 70px тобишь в em я задаю 4.375em.

На мобилках я задаю для body, font-size: 14px и наш тег h1 уменьшается всего-навсего до 61.25px. Понятно, что для мобилок это все равно много, и придется руками через медиа запросы уменьшать этот размер.

Поясните тогда какой смысл в относительных измерениях ? Может быть я чего-то не понимаю.

Answer 1

[dom1n1k]

В em удобно задавать размеры внутри одного смыслового блока. В терминологии БЭМ - для элементов. Ну потому что все элементы зависят от своего блока-родителя, подчиняются какой-то внутренней логике, и он применяется как единое целое. Для самого блока задается размер шрифта в rem/px и играет роль "локального корня". А для вложенных элементов, паддингов, отступов - в em.

В приведенном примере с h1 смысла действительно немного, потому что между body и h1 могут быть ещё элементы. А могут и не быть. А если будут, то непонятно сколько. Ну то есть цепочка наследования не определена точно. Нельзя наследовать размер от элемента, который состоит с тобой в непредсказуемой степени родства.

Answer 2

[sim3x]

Никакой
В древние времена ие не понимал, как правильно масштабировать сайт если пользователь захотел увеличить/уменьшить его через ctrl + =

Comments

[Breeze1]

Выхода нет, придется ручками все размеры через media править ?( уж очень много времени на это уходит

[sim3x]

Breeze1, Если все размеры меняются и нет зависимости - да
Если есть зависимость - попробовать rem
В общем случае - использовать sass / less

[Breeze1]

sim3x, стесняюсь спросить, а чем мне rem поможет ? он делает тоже самое, что и em, только от корневого элемента ? sass активно использую, но опять же не понимаю, как он мне размер шрифтов на разных разрешениях будет менять ?

[sim3x]

Breeze1,

Если есть зависимость

то нужно будет поменять только один размер шрифта, не боясь, что гдето в каскаде ем, что-то не так

Answer 3

[mantovpinets]

Насколько я знаю, em вычисляется относительно текущего размера шрифта. И 4.375 вычисляется от 16px на дэсктопе и от 14px - на мобиле. При этом 1em - это текущее значение шрифта. То есть по сути em - это всего лишь пропорция шрифта. По этому по сути всё правильно. У тебя h1 увеличивается в 4.375 раза. Тут нужно скорее подобрать правильное значение em, чтобы оно правильно отображалось. Вот здесь подробней об относительных едицицах (https://learn.javascript.ru/css-units)

Answer 4

[qbacknn]

Как вариант: медиазапрос с определенной точки и перевод размеры шрифта в vw, чтобы он зависел от ширины вьюпорта. Внутренние размеры блоков в em, чтобы все масштабировалось.
Пример: https://codepen.io/qback/pen/YEzREj/