CSS font size reset?

Question

In my code, I use css which sets the HTML font-size property to different percentages according to the screen width so any rem values are changed accordingly but now my font sizes are all messed up I've tried using css reset and setting body font-size but that doesn't seem to work. Here is a snippet:

@media only screen and (max-width:75em) {
    html {
        font-size: 59%
    }
}

@media only screen and (max-width:56.25em) {
    html {
        font-size: 56%
    }
}

@media only screen and (min-width:112.5em) {
    html {
        font-size: 65%
    }
}

body {
    box-sizing: border-box;
    position: relative;
    line-height: 1.5;
    font-family: sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    padding-top: 3.8rem;
    width: 100vw;
    font-size: 100%;
}

Note that this is a svelte component imported using slot tag

Answer 1

@media only screen and (max-width:75em) {
    html {
        font-size: 59% !important;
    }
}

@media only screen and (max-width:56.25em) {
    html {
        font-size: 56% !important;
    }
}

@media only screen and (min-width:112.5em) {
    html {
        font-size: 65% !important;
    }
}

body {
    box-sizing: border-box;
    position: relative;
    line-height: 1.5;
    font-family: sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    padding-top: 3.8rem;
    width: 100vw;
    font-size: 100%;
}

I tried your code in the Google Chrome browser and saw that it works correctly https://codepen.io/agokselb/pen/JjVORBE . Could you please try the above code? Maybe the browser, classes are not overwriting or do not support the em unit.