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

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

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

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

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

В приведенном примере с h1 смысла действительно немного, потому что между body и h1 могут быть ещё элементы. А могут и не быть. А если будут, то непонятно сколько. Ну то есть цепочка наследования не определена точно. Нельзя наследовать размер от элемента, который состоит с тобой в непредсказуемой степени родства.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
sim3x
@sim3x
Никакой
В древние времена ие не понимал, как правильно масштабировать сайт если пользователь захотел увеличить/уменьшить его через ctrl + =
Ответ написан
@mantovpinets
Насколько я знаю, em вычисляется относительно текущего размера шрифта. И 4.375 вычисляется от 16px на дэсктопе и от 14px - на мобиле. При этом 1em - это текущее значение шрифта. То есть по сути em - это всего лишь пропорция шрифта. По этому по сути всё правильно. У тебя h1 увеличивается в 4.375 раза. Тут нужно скорее подобрать правильное значение em, чтобы оно правильно отображалось. Вот здесь подробней об относительных едицицах (https://learn.javascript.ru/css-units)
Ответ написан
Комментировать
@qbacknn
Как вариант: медиазапрос с определенной точки и перевод размеры шрифта в vw, чтобы он зависел от ширины вьюпорта. Внутренние размеры блоков в em, чтобы все масштабировалось.
Пример: https://codepen.io/qback/pen/YEzREj/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы