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. 

One last thing…

If you liked this article, I'd be incredibly grateful if you tweeted about it.

Also, I don't send emails often but when I do, I try to fill them full of useful goodies. If you like code snippets & dev tips, join my mailing list. There's no catch but I'll probably want to tell you about any new plugins & tools I build.