Using em units and media queries for simple UI scaling on responsive websites

When crafting custom-built interfaces, I find it incredibly convenient to be able to scale the entire thing down (in size) for devices below a certain width. On sites that have a lot of pixel-based CSS rules, this can be tricky as it can involve writing quite a lot of additional CSS inside a media query to override those values. 

To better facilitate this approach, I take the following approach:

  • I define a base font size on the body tag in pixels
  • I define a media query containing a rule that changes that base-font size
  • I use em units almost exclusively across my CSS

The CSS

body {
    font-size: 16px;
}

@media (max-width: 650px) {
    body {
        font-size: 14px;
    }
}

It’s a simple technique, but in doing so, everything across the site styled using em-based values will be reduced in size on devices below 650px in width. 

Need a website? Let's talk.

From website design & SEO through to custom WordPress plugin development. I transform ideas into dynamic, engaging, and high-performing solutions.
Subscribe to get the latest insights & updates in the world of web and how it impacts your business and website.
© 2024 Phil Kurth  |  All rights reserved.