Using CSS root ems and scaling down font-size

Question

I have converted a section of my site from using CSS ems to rems.

Generally this has worked out well for me across devices including the ipad. However, I have a bunch of portrait-specific styling and one of these is: font-size: 65%;

I know that when using ems my font scaling works, however where I have used rems the font size is unaffected in portrait mode.

Short of going through all my CSS and changing it back to em (which would be time-consuming), do I have any other options?

Why do rems not play well with font scaling?

I should add that the native scaling did not work with the design which led to the use of portrait-specific overrides. (The project has also been inherited).

Answer 1

The whole point of rems is to ignore font size changes on elements other than the root (HTML) element. If you want to make a font size change that affects the size of rems, then apply it to the HTML element.