CSS Media Queries
CSS Media Queries focus for device-orientation and change responsive screen size,like mobile device size ,and tablet device size etc.
Example:
HTML Code:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <br><br><br><br> <center><h1 id="mymediaquery">Hello World...!</h1></center> </body> </html>
above html code link for css stylesheet also,like style.css
CSS Code:
#mymediaquery {
color:blue; /*Normal css code*/
}
/*Now start for responsive media query section */
@media only screen and (max-width: 400px) {
#mymediaquery {
color: red; /* h1 color to change mobile view for red color */
}
}
Normal Desktop screen size with property like background-color,color,width,height etc
CSS Code:
#mymediaquery {
color:blue; /*Normal css code*/
}
Normal Desktop Output:
above picture used for h1 tag color is blue.
Now use for media query to display responsive screen size.
CSS Code:
@media only screen and (max-width: 400px) {
#mymediaquery {
color: red; /* h1 color to change mobile view for red color */
}
}
Normal h1 color is blue,now use for media query to change for red color in responsive screen size.max-width size code importance for media query section,its depend for device screen size.
Media Query Responsive Output:
We hope, you all are like this topic.if you have any query,please drop me your comment below comment box section,we are reply to you as soon as possible.
About Author
