Hello,
I am sharing an example of html with the use of mediaquery.
Here in the given example below in which i have used 3 separate files,namely
1:Html (a file with .html extension)
2:External css style sheet (a file with .css extension)
3:Mediaquery css style sheet (a file with .css extension)
1:Html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/samplestyle.css">
<link rel="stylesheet" type="text/css" href="css/Mediaquery.css">
</head>
<body>
<div class="wrapper">
<main class="main clr">
<div class="col">
<h2>Lorem impsum</h2>
<p>Lorem ipsum is used as dummy text.</p>
<p>Lorem ipsum is used as dummy text.Lorem ipsum is used as dummy
text
</p>
</div>
<div class="col">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum is used as dummy text.</p>
<p>Lorem ipsum is used as dummy text.Lorem ipsum is used as dummy
text.
</p>
</div>
<div class="col">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum is used as dummy text</p>
<p>Lorem ipsum is used as dummy text.Lorem ipsum is used as dummy
text
</p>
</div>
</main>
</div>
</body>
</html>
2:External css style
.clr::after{
clear: both;
display: block;
content: "";
}
*{box-sizing:border-box;}
.wrapper{
margin: 0 auto;
width: 1160px;
}
.main{
width: 100%;
margin: 0 auto;
}
.col {
border: 1px solid black;
float: left;
padding: 15px;
width: 32.3%;
margin: 0 5px;
}
3:Media query file
@media screen and (max-width: 1160px) {
.wrapper{width: 960px;}
.wrapper div{width:30%;background-color: #FFC0CB;}
}
@media screen and (max-width: 990px) {
.wrapper{width: 620px;}
.wrapper div{width: 48%;background-color: #DF192F;color: #fff;}
}
@media screen and (max-width: 640px) {
.wrapper{width: 100%;}
.wrapper div{width: 90%;background-color: #05AAD8;margin: 0 auto;float: none;}
}
Note: For all different browsers different plugins are there which you can use to check
how mediaquery works,like for mozilla firefox press ctrl+shift+M to check how media query works.
0 Comment(s)