Media Queries are CSS codes that provide display instructions according to screen size.
Examples of a media query is a CSS code that instructs browsers to load website images depending on the screen size.
“Load 720 px banner image in the header of desktops and loads 350 px banner image in the header of mobile devices”
Example 1
p {
font-size:15px;
}
Example 2
@media only screen and (min-width: 450px) {
p {
font-size: 18px ;
}
}
Example 1 is a normal CSS which says the font size for the text is 15 px.
Example 2 is a Media Query which says that if the screen size is more than 450px then the font size of the text should be 18px.
Media queries are used to design responsive mobile web pages.