Posted by: Peter Andrease

Posted on: May 15, 2012 4:22 pm

-

Media queries have appeared in web development quite recently and are a brilliant way of making a site looks good across all devices. Whether the site is being viewed on a television, desktop, computer, tablet or telephone it will dynamically change to be best suited to the screen size.

The difference between a phone which can be only 320px wide and a large monitor which could be 2000 pixels wide is huge and paying attention to this will enhance the user experience.

Most of the big sites use responsive web design and media queries to specify the width across the different devices. Websites like Amazon are accessed on phones and tablets daily and thus it is essential for them to be able to provide a mobile friendly version.

Media queries will add development to your scope but for a little extra time, it can make a lot of difference.

So to add media queries to a site you’ll need to add them at the end of the stylesheet so it overrides all the other styles specifically for each device.

So what would you use it for?

  • Change a 3 column site into 1 column for a mobile screen.
  • Loading higher resolution images for bigger screens
  • Line-height and font sizes.

So if you’re ready to add it put this html in the head section of the site.

This will make the site be zoomed into 100% rather than it fitting the whole page to the screen.

The next code snippet is a good grounding to get started your different screen resolutions. Add it to the end of your css sheet and start coding!

@media screen and (min-width: 1200px) {}
@media screen and (max-width: 760px) {}
@media screen and (max-width: 550px) {}
@media screen and (max-width: 400px) {}

768px x 1024px is the resolution of an ipad
320px x 480px is the usual resolution of android and iphones (portrait and landscape)

A great place to check to see how the site looks is here.

Some examples I like, make sure you resize the window to see the media queries take effect:

Authors
Categories
Archives
Blogroll