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.