Font-size формула?

Question

[Владислав]

body {
  font-size: 1.4rem;
}

@media only screen and (max-width: 1300px) {
  body {
    font-size: 1.3333333333333333rem;
  }
}

@media only screen and (max-width: 1200px) {
  body {
    font-size: 1.2727272727272725rem;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}

По какой формуле они тут нашли font-size для 1200px и 1300px ?
Вот еще пример из того-же css файла.

p {
  font-size: 1.6rem;
}

@media only screen and (max-width: 1300px) {
  p {
    font-size: 1.5238095238095237rem;
  }
}

@media only screen and (max-width: 1200px) {
  p {
    font-size: 1.4545454545454546rem;
  }
}

При этом html font-size: 62.5% что ровно 1rem = 10px

Comments

[Алекс Глебов]

https://jsfiddle.net/oar2ek0d/1/
вот годная формула

[Ankhena]

Вероятнее всего 1.4 получили от шрифта в макете дизайнера, т.е. 14px.
1.33 это минус 5% от 1.4, дальше пропорциями к ширине экрана.

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

Для p тоже самое.

Answer 1

[Максим Тимофеев]

sass, less и другие технологии, которые генерируют css, в них могут быть вычисления типа деления, как следствие не целые числа.
Кстати если Вы все еще пишите css вручную - очень рекомендую. И gulp с ними.

Comments

[Владислав]

окэй, я использую webpack но меня интересует как они получили именно font-size: 1.3333333333333333rem; по какой формуле ... откуда взялось это число не из головы как впрочем и другие. Может кто-то лучше шарит в респонсив.

[Максим Тимофеев]

Владислав, допустим x = 4/3