How to Code Responsive CSS Using Media Queries

Learn how easy it is to code a responsive web page with the use of media queries. Easy enough for beginners!

Welcome to the world of responsive web design! In my opinion, you have chosen the correct path of going down the responsive website route rather than a mobile site or even an app site. Coding responsive websites is easier than you think and it's really fun too!

Introducing Media Queries

Media queries are the 1 tool that you will need to learn to start coding responsively. Don't worry, the name make it sound more difficult that it actually is. In reality, it's just a meta tag and some very easy lines of CSS.

A media query is basically a line of css which says "hey! if this screen size matches this range of pixels, use the following CSS". Take the following for example:

@media screen and (max-width: 800px) {
.head {background:blue;}
}

The example basically says "Hey, if the screen size is no larger than 800px, make ".head"'s background blue." Starting to get it? Not so scary is it?

The important META Tag

Now, this is all well and good, but there is a missing link to get this to work. You need to include the following meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

That basically allows you to reference the screens size in your CSS. Just pop that into your head before your CSS and your good to go. Without it, it just won't work.

Writing your first CSS media query

Now it's time to write that media query. Lets go with one for screen sizes of 320px wide or less. This is your common mobile phone. So, lets say we wanted to change the width of .head to 100% and the background color to black if on a mobile. We would do it like so:

@media screen and (max-width: 320px) {
.head {width:100%;background:black;}
}

Easy! I bet the gears in your brain are starting to move now as you start thinking of how you are going to change the elements on the page with different css. It's just strait CSS and best of all, it's easy to test. You don't need hundreds of devices, just resize your browser window and you will see your responsive css kick in. Pretty cool? Don't get carried away, it can get pretty hypnotic and you will start finding yourself playing the 'responsive/not responsive game' on everysite you visit now.

Writing for different screen sizes

Ok, so you have written a css media query for a screen smaller than 320px wide. What about the others? It's up to you which you pick, here is a good list of common 'breakpoints'. Remember, you only really need to code in different breakpoints where the css is going to change. So, you may say that it only changes at mobile, tablet and desktop.

How to write efficient media queries

It's important to limit the amount of times you run a media query in your CSS as it does put a little more memory strain on the browser. So, make sure that you try to contain all your changes by screen size, not by class or elements.

Bad Example:

.head {width:900px;}
@media screen and (max-width: 320px) {
.head {width:100%;background:black;}
}

.nav{height:50px;}
@media screen and (max-width: 320px) {
.nav{width:100%;background:black;}
}

Good Example:

.head {width:900px;}

.nav{height:50px;}

@media screen and (max-width: 320px) {
.head {width:100%;background:black;}
.nav{width:100%;background:black;}
}

See how the good example only runs the media query once? It's cleaner and lighter on the browser.

Going further

That's everything you need to know really. If you want to go further, there is plenty more reading on the net. It might also be worth looking at some of the common responsive frameworks. The 2 popular ones are Twitter Bootstrap and Zurb Foundation and I have written a Twitter Bootstrap vs Zurb Foundation post which helps weigh up which framework to choose for a project.


Comments

Add a Comment

required
required, but not shared

© 2017 Supadupa Web Design