Reset Font-size with @media at different screen sizes

PHOTO EMBED

Fri Sep 09 2022 13:52:34 GMT+0000 (UTC)

Saved by @kaode20 #html #css

/* A few media query to set some font sizes at different screen sizes.
 * This helps automate a bit of responsiveness.
 * The trick is to use the rem unit for size values, margin and padding.
 * Because rem is relative to the document font size
 * when we scale up or down the font size on the document
 * it will affect all properties using rem units for the values.
*/

/* 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%;
  }
}

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

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}
content_copyCOPY

A few media query to set some font sizes at different screen sizes. * This helps automate a bit of responsiveness. * The trick is to use the rem unit for size values, margin and padding. * Because rem is relative to the document font size * when we scale up or down the font size on the document * it will affect all properties using rem units for the values. */ /* 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 */