media queries and em units

Hi everyone!

I have read a lot articles about media queries and what kind of units should we use. I am very confused and I would appreciate some help.

The majority of the articles point out that we should use em because is the best practise.. I would like to speak with an example in order to express my self better.

Lets assume we have:

a root font-size html{ font-size: 62.5%; }--> which will result at a 10px font-size (IF the user doesn't change the default browser font-size.)

a media query : (max-width:38em){ html{ font-size: 50% } }--> which means that when the screen width <= to the 38em then the root font-size will be 50%

So I get how it works when we define the media query to px. To my understanding it uses the user's choice-->define the font-size for the root element--> checks the screen width --> applies the rules. This makes sense because we know that at 608px screen size and below our layout needs to have a smaller font-size.

But when we use em at media queries the rule is not fixed. When the user's choice is for example a font-size of 20px this affects the media-query rule. Is this the way it works ? I mean by the user's choice the layout would have the same 50% font-size until 38em*20px = 760px which is NOT what we really want because we knew that at 608px Am I wrong ?

From what I have read the em at media-queries are affected by the user's choice but NOT by the root font-size. On the other hand since we need a font-size value each time to convert the px to em and this is a variable that changes by the user How we know the impact on our design beforehand ?

when the user selects a font-size 20px ---> based on the above example the html font size will be 12.5px. for the bigger screens and 10px until the 38em screen width correct? ( Which is 475px )

Is this correct because of the fact that everything will scale up so the limit of media query needs to also scale up so proportionally have the same effect on the layout ? So everything will be zoomed in but will keep the same layout is this the case?

Thank you in advance Matt