Responsive web design
by Francis[ Edit ] 2013-06-14 15:21:54
Responsive web design (RWD)
Responsive web design (RWD) is a web design, easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices.
Introduction
Viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.
Its divided in 3 steps.
Step : 1 Meta Tag
Include this meta tag in the <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script>
<![endif]-->
Step : 2 HTML Structure
I have a basic page layout with a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.
Step : 3 Media Queries
1) Max Width
Viewing area is smaller than 600px
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
In Tag
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
2) Min Width
Viewing area is greater than 900px
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
3) Multiple Media Queries
viewing area is between 600px and 900px.
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
4) Device Width
max-device-width is 480px (eg. iPhone display)
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
5) For iPhone 4
Stylesheet is specifically for iPhone 4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
6) For iPad
Media query to detect orientation (portrait or landscapse) on the iPad
<link rel="stylesheet" media="all and (orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
