Monday, 9 September 2013

Design responsive web sites using CSS3 Media Queries and HTML5

Today, we are going to see how to apply CSS Styles based on your access device resolution and size. I hope you have already heard about Responsive Web Design. let me explain what it is?.

Responsive web design  is used to design websites for different access device resolution and size. Yourweb site will be accessed by desktop, tablets, smart phone devices (Android, IOS) etc.  Each device will have a different screen size. If your website needs to adapt for all those device sizes and  have good look and feel, you need to design your sites to be responsive using Responsive Web Design.


Following are the three important things you need to know about responsive web design
  • Fluid Layouts 
  • Flexible Images
  • CSS3 Media Queries
Today, we are going to see the third one 'CSS3 Media Queries'. Let me explain with an example.

HTML5 Code:

<!doctype html>
<html>
<head>
<title>Responsive Web Design Demo</title>
<meta name="viewport" content="initial-scale=1.0;width=device-width"/>
<style>

@media screen and (max-width: 768px){
body{
     background-color: red;
}
}

@media screen and (max-width: 600px){
body{
     background-color: green;
}
}

@media screen and (max-width: 460px){
body{
     background-color: orange;
}
}

@media screen and (max-width: 330px){
body{
     background-color: pink;
}
}

</style>
</head>

<body>
<h1>Responsive Web Design Demo</h1>
<div>
  resize the browser window in order to see the  background color change
</div>
</body>
</html>


In above HTML5 Code, we have set the body CSS background color for various screen width using CSS3 Media Queries (@media screen and max-width property).

If your access device width is not exceeding the 768px. you will see the browser background color as red. please refer the below snapshot.


If your access device width is not exceeding the 600px. you will see the browser background color as green. please refer the below snap.shot.



If your access device width is not exceeding the 460px. you will see the browser background color as orange. please refer the below snapshot.



If your access device width is not exceeding the 330px. you will see the browser background color as pink. please refer the below snapshot


If your access device width is greater than 768px, you will see the browser default white background color.

Hope, you enjoyed this post.

5 comments:

Related Posts Plugin for WordPress, Blogger...