@media query

Remember the days of dial-up? Or what about the days when the only device you used to access the web was your desktop? It was only a short while ago when most people solely used their desktop to access the web. Nowadays, its not uncommon for some folks to use an iphone, laptop, ipad, android device, you name it. So why is it that web designers have so little to work with when web users have so many devices to view the web? In the old days, good ol’ html was often used to check for a screen size.

lt;link rel=”stylesheet” href=”../mystyle.css” type=”text/css” strongmedia/strong=”strongscreen/strong,projection” /gt; code/code

This little jem works fine and dandy but today’s screen sizes range from 3.5in to 32in. Unless you want to include a bunch of stylesheets, this method is just plain outdated. So what is the better solution, you ask? Ta da! The media query module steps in! This is a fantastic css module. The basic syntax is fairly simple. A media query sets a parameter that displays rules if the device used to view the page matches the parameter. Make sense?

@media “logic” and (expression) {rules}

For example, an (expression) could say “only apply these styles if the screen is wider than 400pixels”


@media only and (width:600px) {
background: black url(‘grass.jpg’); height: 200px; padding: 10px;
}

As of now (2012), webkit browsers, firefox, and opera support media queries. IE may eventually support the media query module, maybe someone should go talk to Bill Gates?

Here is a little light reading on the @media query module.

media query