How to create flexible and responsive web design

Meet the media query

Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk. To do so, we could incorporate a query into a linked style sheet’s media attribute:

In plain English, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.

What’s more, you can test multiple property values in a single query by chaining them together with the and keyword:

Furthermore, we’re not limited to incorporating media queries in our links. We can include them in our CSS either as part of a@media rule:

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}
Or as part of an@import directive:

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

Adapt, respond, and overcome

Let’s turn our attention to the images at the base of our page. In their default layout, the relevant CSS currently looks like this:

.figure {
float: left;
margin: 0 3.317535545023696682% 1.5em 0; / 21px / 633px /
width: 31.121642969984202211%; / 197px / 633px /
}li#f-mycroft,
li#f-winter {
margin-right: 0;
}

linearize the page let’s say 600px

@media screen and (max-width: 600px) {
.mast,
.intro,
.main,
.footer {
float: none;
width: auto;
}
}

in a modern desktop browser and reduce the size of your window below 600px, the media query will disable the floats on the design’s major elements, stacking each block atop each other in the document flow.

A FEW TECHNICAL NOTES

It should be noted that media queries enjoy incredibly robust support among modern browsers. Desktop browsers such as Safari 3+, Chrome, Firefox 3.5+, and Opera 7+ all natively parse media queries, as do more recent mobile browsers such as Opera Mobile and mobile WebKit. Of course, older versions of those desktop browsers don’t support media queries. And while Microsoft has committed to media query support in IE9, Internet Explorer currently doesn’t offer a native implementation.

For more information you can check it out here [url]http://alistapart.com/article/responsive-web-design[/url] and checkout the example responsive web design here. [url]http://www.7th-media.com/home[/url]

Also in #CSS _↴