Блог о программировании, электронике и рыбалке

CSS – поместить текст в одну строку

шрифт размер font size CSS  primery na html i css

Автоматическое изменение размера шрифта на CSS.

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

Столкнулся с небольшой проблемой – название сайта в мобильной версии не помещался в отведенное для него место. Сперва думал подобрать размер шрифта, но в этом случае на устройствах с большим разрешением оставалось бы много пустого места.

В основном пользуюсь em и px, но для решения текущей проблемы они не подходят.

В данном случае нам поможет vw.

1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота и шрифт элемента

Для меня подошло значение в 7 vw.

Использовать можно так:

.brand-logo {font-size:7vw;}

Результат работы на разных разрешениях:

992 px

шрифт размер font size CSS  primery na html i css

240px

шрифт размер font size CSS  primery na html i css

Для справки

  • 1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
  • 1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.
  • 1vmin = 1vw или 1vh. Выбирается то, которое меньше.
  • 1vmax = 1vw или 1vh. Выбирается то, которое больше.

  • vertical_align_bottomCSS – поместить текст в одну строку
    • Автор:
    • Язык: ru-RU
    • Миниатюра: https://geekelectronics.org/wp-content/uploads/2017/09/font-size.png
    • Рубрика: HTML и CSS
    • Метки: , , ,
    • Обновлено: 12.09.2017
    • Комментариев: 1
    • Просмотров: 94
  • Рейтинг:
    1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5,00 out of 5)
    Загрузка...
  • Поделиться:
logo

Комментариев: 1

Добавить комментарий

vertical_align_top
banner