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

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

font-size

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

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

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

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

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

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

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

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

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

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

992 px

image

240px

image

Для справки

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

Свои вопросы оставляйте в комментариях или задавайте их в нашей группе в Телеграм

Geek Electronics
  • keyboard_arrow_downCSS – поместить текст в одну строку
    • Автор:
    • Миниатюра: CSS – поместить текст в одну строку
    • Рубрика: Веб-разработка
    • Обновлено: 15.03.2018
    • Комментариев: 3
    • Просмотров: 288
      • searchПоисковые боты
        Дата Бот
        2018-06-18 22:12:19 Yandex
        2018-06-17 08:17:32 Bing
        2018-06-16 06:58:19 Bing
        2018-06-15 09:17:56 Bing
        2018-06-13 21:22:01 Yandex
        2018-06-13 10:39:01 Bing
        2018-06-12 16:34:10 Bing
        2018-06-12 07:26:58 Bing
        2018-06-11 13:59:34 Bing
        2018-06-10 11:27:36 Bing
  • Оцените пожалуйста статью
    1 Star2 Stars3 Stars4 Stars5 Stars
    Loading Загрузка...
  • Поделитесь с друзьями
GeekElectronics

Похожие записи

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

  • Avatar for source
    Max:

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

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

arrow_upward