Coderweekend

How to set different Font sizes for Mobile and Desktop in CSS

  • css

There is no clear separation between mobile and desktop.

But we can use screen width to classify mobile and desktop devices indirectly.

So, you can use max-width in media queries (@media) in CSS to set different font sizes for mobile and desktop devices.

Here is an example where we set the font size to 16px for mobile devices and set the font size to 18px for any devices larger than that.

/* default font size for desktop */
body {
  font-size: 18px;
}

/* media query for mobile devices */
@media only screen and (max-width: 768px) {
  body {
    font-size: 16px;
  }
}