Percentage root font sizes don't work

object505 commented 8 years ago

I had the min and max font size set with rem units and been using the 62.5% hack to reset font-size to 10px. What I noticed is that using this setup made the plugin wrongly calculated the responsive resizing of the fonts. After searching in the source code I noticed the rootSize variable that was set to 16px and all calculations for the resizing of the font were made with that value and the fonts kept on growing/shrinking beyond the max/min size set for the font. Further down the code I found where an override for the rootSize is set. Basically it searches for the html tag and then checks if the font-size is explicitly set with px units. So in order everything to work with the 62.5% hack first set the font-size with px and then use the hack or just leave it with 10px:

html { font-size: 10px; font-size: 62.5%; }

Would be also a good thing to add this to the readme file for future reference.

BTW, great plugin 👍

madeleineostoja commented 8 years ago

Ah okay, so what we should do here is also check for an explicit percentage font size on html.

Not sure when I'd be able to get to that, happy to take a PR though.

ekfuhrmann commented 4 years ago

I know it's been awhile but I do want to add that while html { font-size: 10px; font-size: 62.5%; } does resolve the issue for px based font sizing, it does not seem to work correctly when using rem based sizing.

Has any progress been made on checking for global size, or even just the ability to modify the responsive-type rootSize?

madeleineostoja / postcss-responsive-type

Percentage root font sizes don't work #23