Font-size formula?

body {
 font-size: 1.4 rem;
}

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

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

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


What was the formula they've found the font-size to 1200px and 1300px ?
Here's another example from the same css file.

p {
 font-size: 1.6 rem;
}

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

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


While the html font-size: 62.5% that exactly 1rem = 10px
June 10th 19 at 14:29
1 answer
June 10th 19 at 14:31
sass, less and other technologies that generate css, they can be compute the type of a division, as a consequence of not whole numbers.
By the way if You still write css by hand - I highly recommend. And gulp them.
okay, I'm using webpack but I'm interested in how they got it font-size: 1.3333333333333333 rem; what is the formula ... where did this number not from the head as well, and other. Maybe someone knows better responsive. - Janet_Mueller commented on June 10th 19 at 14:34
say x = 4/3 - Henderson_Beat commented on June 10th 19 at 14:37

Find more questions by tags Adaptive designFontsTypographyCSSSass