Font Sizes w.r.t media queries calculated in em

Tell us what’s happening:
can anybody tell how did they calculated the font sizes(60% and 58%) w.r.t to media query sizes?
PS. I can understand the em calculation for media query.
Your code so far

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36.

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

Default browser font size is 16px. So 60% will be 9.6px, 58% will 9.28px

1 Like

@DanCouper thanks. you are right. But my question is why did they chose 60% and 58% at first place is there calculation involved? like we calculated 75em from 1200px.
/* 1200px / 16px = 75em */
@media (max-width: 75em)

It’s arbitrary, could have chosen any unit. Somebody’s eyeballed it as those two numbers being something that they think looks good when applied.

Note that often the root element has a size in px or % set as a base to work from (so 16px or 100%) when you’re doing the CSS for a page, this is the same. What it means is that it changes the font size on the root (<html>) element, so anything else in the CSS that’s sized in ems/rems will derive from that.

1 Like