In today’s growing mobile browser user base, web designers find a need for making websites that interact with those specific devices.

In my css basics tutorial I introduced three attributes when talking about the link tag: rel, href, and media. Media is, as I said in the post, used to describe what media the stylesheet should be used for. For example you could also make a style sheet with media=”print” and it would be used when the user would print your website…. Yet we are not limited to one-word media types. Welcome to the world of media queries. (bring the width of your window down past 480px on my website here and you’ll sit it change)

Media queries are different from checking what type of device is being used to view the website. Media queries can be used to check the window dimensions or even the dpi (the resolution).

So how do you write it?

Let’s say I have a style sheet named mobiledevices.css. To connect it for devices with a width of less then 480px, you would write:

But you don’t have to have a completely new style sheet just for these screen sizes.

In css we can use something called a rule. The following would be a rule for some properties inside a style sheet when the device width is equal to or less then 480 pixels:

So what can you do with this? This can help simplify your life when trying to make your website look better on larger screens or tiny screens like the iphone. Using javascript to identify the browser or width of the window is way more tedious than media queries and would not be able to adjust in real time without the setInterval function… and that would slow down the performance of your site more then the media queries and you need to take into account that people have JavaScript switched off sometimes. (I’m sure there are other ways to accomplish this with javascript but when it comes down to it, it’s way easier to just use media queries).

For even more information about this subject, check out Ethan‘s outstanding article about responsive websites.

If you need any help with this stuff or would like an example, please leave a reply and I’ll see what I can come up with