Есть ли способ изменить размер текста, если я изменю масштаб в браузере при использовании модуля просмотра?

Question

Я выбираю работу с единицами просмотра, чтобы сделать мое веб-приложение отзывчивым.

Проблема в том, что когда я устанавливаю размер шрифта в vw, я получаю именно тот размер, который мне нужен для всех экранов, нокогда я изменяю масштаб браузера, размер текста остается прежним.

Я попробовал способ, но не знаю, есть ли лучший способ сделать это.

Мое реальное решениеобъединить пиксели с vw, используя calc

text: {
  fontSize: 'calc(10px + 2vw)'
}

Answer 1

Из https://css -tricks.com / books / volume-i / scale-typography-screen-size / У них есть хорошая формула, которую я использовал

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Пример:

  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));

Это означает, что он будет иметь FontSize 14px на экранах 300px и размер шрифта 26px на экранах с шириной 1600px.