Как используют в верстке vh для размеров шрифтов?

Question

[godsplane]

В своих проектах я использую пиксели, при верстке с макета.
Что мне (или дизайнеру) нужно учитывать и делать чтобы перейти с пикселей на em/vh/rem ?
В особенности интересует vh , так как очень много где стал видеть такой подход для размера шрифта. Как прийти командой к этом способу указании размеров?

Comments

[Дмитрий]

Ну ем норм. Это пропорции

[godsplane]

Дмитрий, пропорции это понятно. только вот я слышал что для того чтобы использовать em в проектах надо чтобы дизайн под эти em был заточен, иначе все бессмысленно

[Дмитрий]

godsplane, просто используйте везде ем и проблем не должно быть

[Сергей delphinpro]

Дмитрий, =)
С em как раз проблем не оберешься/ Нужно многое учитывать из-за того, что размер em наследуется от размера шрифта родителя

Грубый пример:

p { font-size: 2em; }
header { font-size: 2em; }

<!-- Здесь параграф будет как и задумано размером 32 пикселя -->
<p>...</p>

<!-- А здесь аж 64 -->
<header> <p>...</p> </header>

Пример не особо удачен, вы можете захотеть именно такое поведение. Но сайд-эффект очевиден, он не везде нужен, а скорее даже мало где.
Даже если все продумаете, в будущем при доработках вылезет где-нибудь в неожиданном месте и придется на скоренькую фиксить, выставляя размеры в пикселях =)

Answer 1

[Сергей delphinpro]

vw/vh - это довольно специфичный кейс для указания размера шрифта. Он не всегда и не везде нужен.
А вот за использование пикселей надо уже наказывать =)

Самое простое - ну хотя бы rem использовать.
Как?

Ну опять же самое простое решение, это задать для корня размер 62,5%

:root{
  font-size: 62.5%
}

Это даст вам базовый размер шрифта в 10 пикселей (1rem = 10px) и вам будет удобно, без вычислений, задавать любые размер в rem.

body { font-size: 1.4rem; /* 14px */ }
h1 { font-size: 3.2rem; /* 32px */ }

Ну логика понятна, надеюсь.

Если используете препроцессор, то можно написать функцию для пересчета пикселей в ремы и использовать ее везде.

@function toRem($px) {
  /* 16px – это значение шрифта по умолчанию в большинстве агентов */
  @return $px / 16px * 1rem;
}

body { font-size: toRem(14px); }
h1 { font-size: toRem(32px); }

Comments

[godsplane]

да, я видел эти решения, но в чем смысл?
По сути это те же пикселей только переконвертированные?

Мне всегда казалось что rem/em это для кейса когда ты в мобилке просто уменьшаешь базовый размер шрифты и все размеры у тебя становятся под мобильные размеры, а для этого я так понимаю нужен специфичый дизайн.

[Сергей delphinpro]

godsplane, Смысл есть. Попробуйте сверсать одну и ту же страницу в пикселя и в ремах. Потом посмотрите ее с разными настройками базового шрифта в браузере.

spoiler

Разницу, что называется, увидите невооруженным взглядом. В случае с пикселями страница будет выглядеть одинаково. В случае с ремами, она пропорционально изменит размер.
Это очень важно для таких пользователей как я, с плохим зрением. Здесь, на хабре, до сих пор используют пиксели, и моя настройка на дает эффекта. Приходится исползовать масштабирование, а это, в свою очередь, приводит к другим сайд-эффектам – переключение на мобильную версию, чего мне не хочется. В случае относительных размеров, страница бы просто увеличила свои размеры для моего комфортного просмотра.

[godsplane]

Сергей delphinpro, понял. тогда смысл есть да. но мой кейс с подстраиванием размеров под мобилки вообще рабочий?

[Сергей delphinpro]

godsplane, конечно. Уменьшить все шрифты в мобилке одним правилом, это удобно.

[godsplane]

Сергей delphinpro, но что тогда нужно учитывать при создании такого диайзна?Это вообще задача дизанера или меня как верстальщика?

[Сергей delphinpro]

godsplane, да ничего, в общем-то. Верстается как обычно, для программиста размеры по-прежнему в пикселях из дизайн-макета. Просто в итоге верстка улучшается, страница более адекватно реагирует на пользовательские настройки в браузере.

[Сергей delphinpro]

С вашей стороны затраты минимальные, а для пользователя лишнее удобство.

[Николай Угольников]

в rem'ах задавать только в font-size или абсолютно везде?

[Сергей delphinpro]

Николай Угольников, везде - да. Абсолютно - нет. Все единицы измерения нужны.
Иногда вам нужно вывести трехзначное число и удобно задать область шириной 3ch
Иногда вам нужен элемент внутри другого размером меньше и удобнее прописать .s > span { font-size: 0.8em; }
Иногда вам нужно привязать размеры к размеру вьюпорта, тогда следует использовать vw/vh.
Ну и так далее, посыл, надеюсь, понятен.