Автоматическое изменение размера шрифта на CSS.
Сегодня было немного свободного времени, которое решил потратить на доделку адаптивной темы для этого сайта.
Столкнулся с небольшой проблемой – название сайта в мобильной версии не помещался в отведенное для него место. Сперва думал подобрать размер шрифта, но в этом случае на устройствах с большим разрешением оставалось бы много пустого места.
В основном пользуюсь em и px, но для решения текущей проблемы они не подходят.
В данном случае нам поможет vw.
1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота и шрифт элемента
Для меня подошло значение в 7 vw.
Использовать можно так:
.brand-logo {font-size:7vw;}
Результат работы на разных разрешениях:
992 px
240px
Для справки
- 1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
- 1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
- 1vmin = 1vw или 1vh. Выбирается то, которое меньше.
- 1vmax = 1vw или 1vh. Выбирается то, которое больше.
Спасибо. То, что искал.
Я что то не понял, куда это и как прописывать? У меня адоптированный шаблон, но при увеличение шрифта, в мобильной версии не вмещается....
style.css в папке с темой