DEV Community

Discussion on: html{font-size:?} Responsive Magic

Collapse
 
imcheesecake profile image
Freddie • Edited

I usually do something similar, but instead of using % in do this in my base css file.

:root {
   --font-calc: calc(14px + (16 - 14) * ((100vw - 400px) / (1600 - 400)));
}

html,
body {
    height: 100%;
    font-size: var(--font-calc);
}
Enter fullscreen mode Exit fullscreen mode

So in this case 1rem is going to be anything between 14-16px depending on screen resolution, but it can't go lower than 14px unless I specify it with a media query.
It gives basically the same result as using % but you have a bit more control and don't have to use media queries to change the size unless you really need to

Collapse
 
b4two profile image
Batuhan

mvp