EM and REM scaling in different resolutions
Hello, i have a question about EM and REM and i don't found any answer, even chatgpt doesn't know.
I understand how they work. For example 16px font size on the root, 2REM = 32px and EM the font-size of the parent element.
What i don't understand is how they scale in different screen resolutions.
Because if i set the font-size for example 16px and i use rems on my page. The page will look good on 1080p but on a 4k monitor would look tiny, because when i use REM in the end is still pixels. (and pixel is a fixed value)
If i don't declare the font-size what will the browser consider as default font-size? I mean is something fixed to 16px? Or it varies on the screen resolution? Example if i am in 1080p will be 16px, 1440p 32px, 4k 64px?
Thank you.
I understand how they work. For example 16px font size on the root, 2REM = 32px and EM the font-size of the parent element.
What i don't understand is how they scale in different screen resolutions.
Because if i set the font-size for example 16px and i use rems on my page. The page will look good on 1080p but on a 4k monitor would look tiny, because when i use REM in the end is still pixels. (and pixel is a fixed value)
If i don't declare the font-size what will the browser consider as default font-size? I mean is something fixed to 16px? Or it varies on the screen resolution? Example if i am in 1080p will be 16px, 1440p 32px, 4k 64px?
Thank you.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
