Resposible font-size. Каким методом идти?

Рейтинг: 1Ответов: 1Опубликовано: 05.01.2015

Всем доброго времени суток и с наступившим!

Вопрос такой: на сайте есть информационные блоки с заголовками и некий текст. На мониторах отображается отлично (как и надо), а вот когда просматриваю с телефона или планшета - удовлетворение от шрифтов падает (блоки "едут") и т.д.

Сейчас решаю следующим образом:

  1. Беру некую строку, которая, априори, должна занимать строго одну строку. Для неё применяю bigText (автоматическое определение максимального шрифта без переноса строки).
  2. На load и resize вешаю функцию пересчета дочерних шрифтов относительно главного.

В правильном ли я направлении двигаюсь? Пробовал через @media - слишком много условий, и css теряет читабельность.

И в догоночку: что Вы думаете по поводу использования единиц измерения шрифта vw?

css javascript шрифты
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Я так понимаю, на десктопе всё грамотно и речь про мобильные устройства? В мобильных устройствах не нужно событие resize (если точнее, оно есть, но его использовать, неверно, и не имеет смысла), есть orientationchange, но Вам думаю он тоже не нужен.

1) Поставьте фиксированный вьюпорт, например:

<meta name=viewport content="width=640">

2) Напишите всего 1 media-query под Ваш фиксированный вбюпорт:

@media (max-width: 640px) { /* css here */ }

И в нём отрегулируйте размер шрифта, при корректной вёрстке - это даст вам корректное отображение на всех устройствах.