json2021
json2021

Reputation: 2317

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.

Upvotes: 0

Views: 2930

Answers (1)

jeffjenx
jeffjenx

Reputation: 17467

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.

Upvotes: 1

Related Questions