Можно ли установить максимальный шрифт и минимальный шрифт и реагировать при масштабировании?

у меня есть этот класс

.md-subheader-title {
    // 22 pixeles
    font-size: calc(12px + 2vw); 
}

при максимальном размере его 22 пикселя это нормально, но в мобильной версии он меньше 14 пикселей, можно ли сделать его отзывчивым между максимальным размером шрифта 22 пикселя, минимальным размером шрифта 14 пикселей?

сколько максимальный размер?

Abdelillah Aissani 18.07.2019 14:17
Отзывчивый размер шрифта
Abhishek Pandey 18.07.2019 14:18
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте медиа-запрос, чтобы размер шрифта был фиксированным на окнах просмотра меньше указанной ширины.

В вашем случае вы хотите, чтобы размер шрифта был не менее 14 пикселей. Это произойдет, когда calc(12px + 2vw) меньше 14px или когда 2vw меньше 2px; то есть на экранах уже, чем 100px.
(Заметьте, это очень узкие экраны.)

.md-subheader-title {
    /* 22 pixeles */
    font-size: calc(12px + 2vw); 
}

@media all and (max-width: 100px) {
  .md-subheader-title {
    font-size: 14px; 
  }
}
<div class = "md-subheader-title">
This is a variable font, up to a point.
</div>

Другие вопросы по теме