Responsive Web Design: Media Queries

Inhabitant and structure can—and should—mutually influence each other.

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.

Responsive Web Design by ETHAN MARCOTTE

It's a shame that I started to know of Responsive Web Design until recently. I was constrained by the things I had already learned. As a result, I spent a lot of time playing with CSS without further exploration.

It might be late but at least I finally read Ethan Marcotte's inspiring article. Fluid grid and CSS3 media queries allow the website to tailor its layout according to the devices used.

First, set meta viewport:

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

Then, three ways to set media queries: You can test multiple property values in a single query by chaining them together with the and keyword.

1. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
   

2. @import url("shetland.css") screen and (max-device-width: 480px);
   

3. @media screen and (max-screen-width: 480px) {
   .column {
    float: right;
    margin: 0 3.3175355% 0 0; /* 21px / 633px */
    width: 31.1216429%;      /* 197px / 633px */
   }
   li#rowfirstend, li#rowsecondend {
    margin:0;
   }
   }

It is also important to keep some floating points value with many numbers after the decimal. The final look would benefit from the precise proportions (source: Beginner’s Guide to Responsive Web Design).

Other sources:
50 Fantastic Tools for Responsive Web Design
Multi-Device Layout Patterns
Responsive Navigation Patterns