What are CSS Media Queries?

CSS Media Queries are a really nice way to target specific users of your website and give them their own custom look and feel! By splitting CSS into sections with queries, it allows you to do some pretty amazing things.

Targets Portrait only displays, using these super powers to your advantage can really make the user experience of your website the best it can possibly be!

Let’s have a look at some code in action!

What the image below shows is simple a 3×1 grid changing into a 1×3 grid by a simple media query

desktop-to-mobile-css

Time for the code!

For desktop…

For mobile…

And now how to implement it! as you can see the width and margin together of all the boxes are going to be 900, so obviously anything under 900px wide we want to change to the “mobile” view.

What will happen is the CSS will check if the page is at least 901px in width, anything under 900 will cause it to go into the mobile CSS. This can give you the ability to create different views for different users, working more closely with percentages for widths and adding display:block; to different elements at different widths can create a much greater fluid experience.

That’s it! You’ve now created a view for mobile and a view for desktop! It can be quite awkward when you have thousands of lines of CSS and you’re trying to make it responsive via media queries, however you can import different stylesheets depending on a query

Internet Explorer

Of course you’re going to have issues with Internet Explorer and media queries but where there’s a bug there’s a fix!
Using jQuery plugins it can quickly emulate media queries for IE causing you no harm! Here’s the link! Enjoy!

There is a whole world of queries out there! Get exploring!

For more reading

Media Queries on Wikipedia

Media Queries on W3

Any questions? Any comments? Drop us a line below or Contact Us!

NuBlue are a multi-award winning web development agency, specialising in the planning, design, development and ongoing support of online projects.