Out Now

CSS Media Query Cheat Sheet

Even if you’re not planning to do much CSS on your WordPress site, chances are you might need to tweak something.

In today’s multi-device world, having a site that looks good on a range of devices – from phones to desktop PCs and those giant Apple Macs people seem to like – is essential. You need to be able to control your CSS and adapt at depending on the size of the device you are looking at.

The key to this is media queries. I don’t write these often and I sometimes forget the syntax, so this post is my CSS media query cheat sheet.

/* iPhone and above */
@media only screen and (min-width : 320px) {}

/* Extra small devices and above */
@media only screen and (min-width : 480px) {}

/* Small devices and above */
@media only screen and (min-width : 768px) {}

/* Medium sized devices and above */
@media only screen and (min-width : 992px) {}

/* Large devices and above */
@media only screen and (min-width : 1200px) {}

I like to deal with fonts by setting a base size, usually in the body tag and then using the rem unit of measure.

rem is emphasis relative to the base size. So, 2rem is twice as big as whatever your base font size is.

This means you can set a different base font size in each of the media queries above (for example) and all other fonts will automatically adjust to the required size based on their rem value.

CSS Base Size and REM example

/* iPhone and above */
@media only screen and (min-width : 320px) {
     body { font-size: 10px; }
}

/* Extra small devices and above */
@media only screen and (min-width : 480px) {
     body { font-size: 12px; }
}

/* Small devices and above */
@media only screen and (min-width : 768px) {
     body { font-size: 14px; }
}

/* Medium sized devices and above */
@media only screen and (min-width : 992px) {
     body { font-size: 16px; }
}

/* Large devices and above */
@media only screen and (min-width : 1200px) {
     body { font-size: 18px; }
}

h1 { font-size: 5rem; }
h2 { font-size: 4rem; }
h3 { font-size: 3rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.5rem; }

Leave a Reply