json2021 json2021 - 6 months ago 18
CSS Question

min-width em using media query

I am learning how to work with CSS using EM. (I am used to always using px)

I saw the following media query

@media screen and (min-width: 50em){

}


I was just wondering what is the 50em relative to?

When I was reading about EM it specifies that Em is Relative to the font-size of the element (2em means 2 times the size of the current font)

But with min-width there is no font size?? I am a bit confused here.. any help would be really appreciated.

Answer

In this case, the 50em is referencing the base font size, which is (for most browsers) 16px. It can be configured by the users pre-defined preferences within the browser.

Some browsers will either set the root html element (which rem is based upon) to be 16px or a percentage of the base font size as defined above.

Comments