Media Queries
By using the media queries we can develop the responsive websites, It allows the different CSS instructions to be used for different sized screens.
It allows you to present the same content differently on different size screens. Most people think of them as a way to make the same webpage look good on a phone or a desktop computer.
A media query is a logical expression it can be resolved to either true or false. If the media query is true, the related style rules are applied to the target device. observes example.
@media only screen and (min-width: 600px) {
.body{
font-sze:20px;
background-color:green;
}
}
@media only screen and (max-width: 480px) {
// write your query's here
.body{
background-color:red;
}
}
Each query starts with @media--- conditional styles for different media types or devices
screen--- means following rules apply to computer screens, tablets etc.
and---- the condition under which the css that follows is applied.
only--- these conditionals also allow you to string several conditional together.
Few examples below:
Suppose you have to put some image in your system and also you have to give image height and width, height:250px; width:450px; then check the output,o/p is ok. Then you have to check the same output on a different browser or mobile phone or tab output is different means the output having the data inconsistency or data missing etc. to overcome this problem you have to write media query's like below.
@media (min-width: 481px) and (max-width: 768px) {
// means screen size 481 to 768 range at that time image height and width like this. give the height and width below.
.image{
width: px;
height: px;
}
}
Mobile screen sizes: 320*480,320*568,375*667,414*736,360*640,411*731,384*640.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Media Responsive Web page</title>
<style type="text/css">
#main {
margin-left:auto;
margin-right:auto;
width:1000px;
}
#main-content {
padding:20px;
width:625px;
float:left;
}
#main-content1 {
padding:15px;
width:280px;
float:right;
}
.main-content2 {
margin:20px;
padding:1px;
width:330px;
background-color:#DDDDDD;
}
.main-content3 {
font-weight:bold;
padding:10px;
background-color:#EEEEEE;
}
.content {
padding:10px;
background-color:#FCFCFC;
}
@media (min-width: 481px) and (max-width: 768px) {
#main { width:740px; }
#main-content { width:450px; float:left; }
#main-content1 { width:auto; height:auto; float:right; }
.main-content2 { width:160px; }
}
@media (min-width: 321px) and (max-width: 480px)
#main { width:450px; }
#main-content { width:400px;}
#main-content1 { width:auto; height:auto; }
.main-content2 { width:120px; margin:5px; float:left;}
.content { display:block; }
}
@media (max-width: 320px)
#main { width:250px; }
#main-content { width:250px;padding:0px;}
#main-content1 { width:auto; height:auto; padding:0px; }
.main-content2 { width:250px; margin:5px;}
.content { display:block; }
}
@media (min-width: 340px) and (max-width:780px) {
.main-content2 {width:auto; height:auto;}
}
</style>
</head>
<body>
<div id="main">
<div id="main-content1">
<div class="main-content2">
<div class="main-content3">
Mtahs
</div>
<div class="content">
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
</div>
</div>
<div class="main-content2">
<div class="main-content3">
Physics
</div>
<div class="content">
Physics-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
</div>
</div>
<div class="main-content2">
<div class="main-content3">
Chemistry
</div>
<div class="content">
Chemistry-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
</div>
</div>
</div>
<div id="main-content">
<p>
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
</p>
<p>
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
</p>
<p>
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
</p>
<p>
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
Maths-x having the following topics like number system,algebra,geometry,trigonometry,statistics.
</p>
</div>
</div>
</body>
</html>
output: computer screen view
Mobile view: observe the yellow mark data went outside without media query.
With media query output:
