Rem does not rezise elements when screen gets smaller - css

Question

I have a problem where rem is not receing any of my elements when I change the size of the screen for example I have a padding on the body that is 3rem and my font-size on the html element is 62.5% yet when I resize the screen the padding on the body remains at 3rem or 30 pixels
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 3rem;
box-sizing: border-box;
}
I have also included the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 1

The way you have it, the rems would only change if you change the font-size.
If you want to adjust rems based on screen size you need to use media queries and change the root font-size there, e.g.:
html {
font-size: 62.5%
#media only screen and (max-width: 900px) {
font-size: 56.25%;
}
}

Answer 2

html {
font-size: 62.5%;
}
will in normal circumstances ensure that the basic em size is 10px. This is because browsers will default to 16px for the font-size and 62.5% gives you 10px - making it easier to know what, for example, 3em actually is (30px).
If you want to have a coninuous decrease (or increase) in font-size when you decrease (or increase) the viewport width then you can set font-size to be proportional to viewport width. For example:
html {
/* font-size: 62.5%; */
font-size: 1vw;
}
However, there are a couple of caveats. Some browsers (I believe Chrome does this) do not allow font-size to get too small. More importantly, a user may set their default em size to be larger so they see text enlarged and setting a font-size in absolute units rather than percentage terms will override that.
Therefore it needs careful thought before reducing font-size just because the viewport is smaller - the user still needs a decent size to be able to read things well. This is true whether you use the above 'continuous' method or a set of media queries to reduce the size. It's not necessarily advisable. Unfortunately it is not possible to tell how far away from the screen the user might be based on viewport size.