https://codepen.io/freeCodeCamp/pen/zNBOYG?editors=0100
Hello, I’m studying the Free Code Camp’s project on Personal Portfolio, because I’ve always had a problem with sizing, and would like to see how Free Code Camp applied rem sizing in the media breakpoints.
However, I’m wondering why the browser’s base font still has to be 16px in the declared media query when the font size had been recalculated previously in the html document to 62.5% - which gives 1rem to 10px.
Here (1):
html {
box-sizing: border-box;
/* Set font size for easy rem calculations
* default document font size = 16px, 1rem = 16px, 100% = 16px
* (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
*/
font-size: 62.5%;
scroll-behavior: smooth;
}
(2)
/* I am using the em unit for breakpoints
* The calculation is the following
* screen size divided by browser base font size
* As an example: a breakpoint at 980px
* 980px / 16px = 61.25em
*/
/* 1200px / 16px = 75em */
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
 