First of all, we will understand what is media query, Media Query is a query written in CSS for assigning CSS for different screen sizes, like we can design how will my site look when it is opened in a mobile and how will it look when opened in a tablet or laptop or desktop. So, write different CSS for different screen sizes we use media query.
Media Query Example
/* CSS for screen of width 600px or less than 600px like mobile phone */
@media screen and (max-width: 600px){
body{
background-color: lightgreen;
}
}
/* When you add this code to your CSS file then when the screen width decreases the background color will be light green. */
If you want to add a CSS which is between some screen size then you can achieve this by this code:
@media screen and (min-width: 601px) and (max-width: 1024px){
body{
background-color: lightcoral;
}
}
/*
by this code you background color will be light coral when screen width is between 601px to 1024px */Media query for portrait and landscape
By media query you can also specify that how a screen should react when screen is portrait or landscape.
/* Portrait screen */
@media screen and (orientation: portrait){
body{
background-color: lightyellow;
}
}
/* Landscape screen */
@media screen and (orientation: landscape){
body{
background-color: lightgray;
}
}Most important thing to Do
When you are using media query, you should place a meta tag in your html page that the browser set the device width as your website width, to achieve this write this one line to your html code or just paste it.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Use media query to make deployment level sites and Thanks for reading my blog, Subscribe to my blog and leave a comment about how much you liked it and don’t forget to like and share to your friends. See you next time.