Simple Responsive Design using Media Query – Tutorial with Demo!

responsive

Media Queries are playing a major role in making Responsive Designs, that will apt for all kind of devices like iPhone, iPad, Tablet, Computer System etc.,

In this tutorial we are going to see a very basic tutorial of Responsive design that will work even in Older Browsers like Internet Explorer 7 and IE 8  and I hope this will help you to understand what exactly mean Media Queries and how we can make use of it!

See the below code in a CSS file, which is going to do the magic tricks!


@media screen and (max-width: 980px){
//styles goes here for normal screen browser
}

@media screen and (max-width: 768px) {
//styles goes here for tablet and below
}

@media screen and (max-width: 480px){
//styles goes here for iPhone 4+
}

Here is the example html code and CSS for you to play around with it.

HTML


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!-- disable iPhone inital scale -->
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Simple Responsive Design Demo - Blog.Theonlytutorials.com</title>

<link href="style.css" rel="stylesheet" type="text/css">

<!-- css3-mediaqueries.js for less than IE 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</head>

<body>
<p class="fontstyle">Resize the Browser and see how the Background Color changing accordingly!</p>
<br />
<p class="fontstyle">Responsive Media Query Demo by <a href="http://blog.theonlytutorials.com/">http://blog.theonlytutorials.com/</a></p>
</body>
</html>

CSS


body{
background: gold;
text-align:center;
}
.fontstyle{
font-size: 25px;
}
a{
color: white;
}
@media screen and (max-width: 980px){
body{
background: red;
}
.fontstyle{
font-size: 20px;
font-family: "Verdana";
color: white;
}
}
@media screen and (max-width: 650px) {
body{
background: blue;
}
.fontstyle{
font-size: 18px;
font-style: italic;
}
}
@media screen and (max-width: 480px){
body{
background: brown;
}
.fontstyle{
font-size: 15px;
font-family: "Arial";
font-weight: bold;
}
}

You can also see the demo here or just download and use it!

DemoDownload

Add a Comment

Your email address will not be published. Required fields are marked *