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!
[code lang=”css”]
@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="https://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="https://blog.theonlytutorials.com/">https://blog.theonlytutorials.com/</a></p> </body> </html>
CSS
[code]
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!
