How to set font size in percent so that different browsers would render it same?

Question

I'm designing a website and I've met with an interesting problem. I've designed my font-size for different media, using syntax like this:

   @media all and (max-width:1100px) {html {font-size:109%;transition:1s;}}

Everything renders and looks fine when using Chrome. Now I've tried to check it on FireFox, just to be safe and I saw, that same CSS rule is being rendered larger in one zoom level (If is click ctrl+- once then ir renders correctly, if I reset zoom to normal state - text is bigger again).

Should I be creating CSS media rules for FF exclusively or there is some standard way to make this work?

CSS reset is applied and doesn't help in this situation.

Answer 1

The problem was that there was no base font-size on body. So the problem was fixed by simply setting this base size equal to 100%.

Thanks to Olly Hodgson who pointed this out.