Zooming responsive css

Until the browser gods bestow on us wide ranging support for viewport relative dimensions , I've been using the following technique to resize my CSS styling for different mobile screen widths. It consists of three simple steps:

1. Use ems for all dimensions - no pixel sizes - with the BODY font-size set to 10px
2. Design to a 320px wide layout
3. Use my 'responsive zooming' media queries to scale up and down to common screen sizes

So for examples, say you had a really specific font-size on your main header so that it always filled the full width, the CSS might look like this:

body {

    font-size: 10px;

    width:100%

}

h1 {

    font-size:1.36em;

}

This might display perfectly at 320px wide, but as soon as you change the screen size, your header won't fill the full width. So, at the end of our CSS we do this:

@media all and (max-width: 319px) {BODY {font-size:7.5px;}}
@media all and (min-width: 360px) {BODY {font-size:11.25px;}}
@media all and (min-width: 400px) {BODY {font-size:12.5px;}}
@media all and (min-width: 480px) {BODY {font-size:15px;}}
@media all and (min-width: 540px) {BODY {font-size:16.875px;}}
@media all and (min-width: 640px) {BODY {font-size:20px;}}
@media all and (min-width: 720px) {BODY {font-size:22.5px;}}
@media all and (min-width: 768px) {BODY {font-size:24px;}}
@media all and (min-width: 800px) {BODY {font-size:25px;}}

This takes into account a bunch of common screen sizes, and scales the body font-size accordingly, so on different sized screens, all of the content in the body is scaled perfectly.


Final tip: if you want to edit the rules above for another screen size, just take your target screen width and divide by 32, and use that as the font-size. Simple!