Блог

Главная - Вопросы по программированию - Как / почему этот CSS-код помогает сделать мой текст отзывчивым?

Как / почему этот CSS-код помогает сделать мой текст отзывчивым?

#html #css #font-size #calc

#HTML #css #размер шрифта #calc

Вопрос:

 font-size: calc(4rem   1vw);

Я немного понимаю, что calc функция изменяет размер моего шрифта динамически, но

  1. Я не понимаю, как 4rem 1vw работает (что именно он делает).
  2. Я не понимаю, как calc взаимодействует или влияет 4rem 1vw

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

1. Значение 1vw равно 1% от ширины окна просмотра. По мере изменения ширины окна просмотра изменяется и размер шрифта.

2.Если вы понимаете, что представляют собой единицы rem и vw, и вы понимаете, что calc функция вычисляет результат передаваемого выражения, это должно быть понятно само по себе.

Ответ №1:

Разбейте его:

 font-size: calc(4rem   1vw);
  
 1vw

vw «равно 1% от ширины начального содержащего блока окна просмотра». Браузер может вычислить это до значения в пикселях.

 4rem

rem зависит от размера шрифта HTML-элемента. Браузер может вычислить это до значения в пикселях.

Итак,

 calc(4rem   1vw)

calc объединяет эти значения вместе и присваивает font-size свойству это значение.

Теперь я говорю «значение пикселя» здесь, но это может быть какое-то промежуточное значение, которое не имеет ничего общего с пикселями как таковыми, но идея та же.

Ответ №2:

Прежде всего, rem и vw работают примерно одинаково, но не с одинаковыми ссылками. Вы должны видеть rem и vw как в значительной степени только другие показатели.

rem основан на вашем корневом размере шрифта html. Это означает, что до тех пор, пока ваш html имеет размер шрифта, скажем, 16 пикселей, 1rem будет равен 16px. Если в какой-то момент вы измените размер шрифта html, все rem показатели вашего css будут адаптированы. Это позволяет более единообразно отображать в браузерах с разными значениями CSS по умолчанию, когда они не были установлены непосредственно разработчиком. (Дополнительную информацию см. в reset.css)

Итак, здесь, пока вы не измените размер шрифта html, 4rem = 64px.

Теперь о vw , это работает почти так же, как мы описали с rem, но он основан не на фиксированном размере шрифта в любом месте, а на вашем окне с. Что делает его основанным на полностью переменных данных. Вы можете увидеть эту переменную следующим образом: для окна 1000 пикселей 1 пиксель = 0,1 vw. Итак, 1vw — это 1% от ширины вашего окна.

Итак, если ширина вашего окна равна 1000 пикселей, 1vw = 10 пикселей.

Calc буквально просто добавляет их: 64px 10px. В конце вашего кода у вас будет фиксированное значение 4rem , которое всегда будет иметь одно и то же значение, пока размер шрифта html остается неизменным, и переменное добавление 1vw, которое будет зависеть от ширины вашего браузера.

Редактировать:

В качестве последней информации, потому что, возможно, это не ясно: Вам не нужно calc или 4rem , чтобы сделать ваш размер шрифта «отзывчивым». Попробуйте с font-size: 1vw , и он также будет отзывчивым. Ваш calc просто сделает изменение, основанное на ширине вашего устройства, меньшей частью вашего конечного размера шрифта.