Линейный переход типографии флюида: как вычисляется выражение calc ()?

Question

Использование подхода, описанного, например, Майком Ритмюллером использования calc () для плавного перехода от минимального размера шрифта к максимальному размеру шрифта, результат возвращается из calc () и отображается вбраузер несколько озадачивает меня (и не так, как задумано).Как следующий код возвращает этот результат для h1 при размере области просмотра от 25 до 80 мм?(Я также включил calc () для размера шрифта html, поскольку он также масштабируется с пропорцией h1)

Результат:

h1 calc (0.450091rem+ 3.38364vw)

Код:

html {
  font-size: 1.125rem;
}

@media screen and (min-width: 25rem) {
  html {
    font-size: calc(1.125rem + 0.25 * ((100vw - 25rem) / 55));
  }
}

@media screen and (min-width: 80rem) {
  html {
    font-size: 1.375rem;
  }
}

h1 {
  font-size: 1.296rem;
}

@media screen and (min-width: 25rem) {
  h1 {
    font-size: calc(1.296rem + 1.861 * ((100vw - 25rem) / 55));
  }
}

@media screen and (min-width: 80rem) {
  h1 {
    font-size: 3.157rem;
  }
}

В результате получается «скачкообразный» не плавный переход, когда мы входим в область просмотра min-width 80rem и достигаем максимального шрифтаразмер 3,157рем.

Answer 1

Поскольку вы изменяете font-size элемента html, вы затем изменяете значение rem.Это немного сложно, но давайте шаг за шагом будем следовать коду и вычислениям.

Изначально у нас будет font-size, равный 1.125rem в пределах html, и у нас будет font-size для h1равен 1.125 * 1.296 * 16px = 23.328px.Для медиа-запроса у нас будет 25rem = 25*16px = 400px и 80rem = 80*16px = 1280px ¹ .

После 400px (первый медиа-запрос) это становится сложно, потому что мыбудет иметь динамические значения размера шрифта с html, поэтому font-size для h1 будет выглядеть примерно так:

 (1.296* P *16px + 1.861 * ((100vw - (25 * P * 16px) ) / 55))

Где

 P = (1.125 * 16px + 0.25 * ((100vw - 25 * 16px) / 55))

Теперь, когда мы достигнемследующий медиа-запрос (1280px), у нас будет 100vw, равный 1280px (не 80rem, как мы можем подумать!) и P = 1.375rem, так что результат с учетом forumla до 1280px будет 1.296 * 1.375 * 16px + 1.861 *((1280px - 25 * 1.375 * 16px)/55) = 28,512px + 24.7px = 53.21px.

И результат с учетом формулы после 1280px будет 3.157 * 1.375 * 16px = 69.454px.Это объясняет, почему у вас нет перехода, и виновником был 100vw, равный 1280px, а не 80rem, поэтому вы хотите, чтобы результат с намерением составил (80 - 25)/55 = 1

Следуя формулеВы обнаружили, что у нас будет тот же результат:

h1 calc (0.450091rem + 3.38364vw)

, когда на 80rem 100vw будет 1280px и3.38364vw будет 43.13px, а 0.45rem будет 0.45 * 1.375 * 16px = 9.9px, а общее 53.03px.

Результат также логичен, поскольку calc уменьшит формулу для группировки всех одинаковых единиц вместе:

calc(1.296rem + 1.861 * ((100vw - 25rem) / 55))
calc(1.296rem + 1.861 * (1.8181vw - 0.4545rem)
calc(1.296rem + 3.3834vw - 0.8459rem)
calc(0.4501rem + 3.3834vw)

---

¹ Почему в медиа-запросе мы не умножаем назначение, используемое в html?

Учитывая приведенный ниже расчет, мы можем подумать, что в медиа-запросе мы также должны учитывать ту же логику, поэтому 25rem и 80rem также должны быть динамическими.Это не относится к медиазапросу, как подробно описано в спецификации :

Относительные единицы длины в медиазапросах основаны на начальном значении , что означаетэти единицы никогда не основаны на результатах деклараций.

Таким образом, какое бы значение font-size не использовалось в html, мы всегда будем рассматривать начальное значение 16px для 1remвнутри медиа-запроса.

^{Из-за некоторого округления будут некоторые небольшие различия между значениями, полученными с использованием другого метода.Цель состоит не в том, чтобы предоставить точный расчет, а в том, чтобы объяснить расчет.}