Useful CSS Stuff

Ignition
34

cough I've gone back to rem.. :face_with_crossed_out_eyes: But defined media queries in the stylesheet to change the root fontsize based on resolution..

fwiw, this is what I've been testing with, and it seems to be holding up ok...

/* Default root font size (applies to all screen sizes unless overridden) */
html {
  font-size: 16px; /* Base size: 1rem = 16px */
}

/* For small screens (e.g., mobile phones). Note this is larger than the tablet size otherwise it's too small on mobile*/
@media screen and (max-width: 480px) {
  html {
    font-size: 14px; /* On small screens: 1rem = 14px */
  }
}

/* For medium screens (e.g., tablets) */
@media screen and (min-width: 481px) and (max-width: 1499px) {
  html {
    font-size: 12px; /* On medium screens: 1rem = 15px */
  }
}

/* For large screens */
@media screen and (min-width: 1500px) {
  html {
    font-size: 18px; /* On large screens: 1rem = 18px */
  }
}
3 Likes