Understanding this key part of responsive web design is essential before learning how to use them in your CSS code.
Media queries allow a designer to create multiple layouts for their HTML code based on the size of the viewport. They can also be used to detect other parts of the viewer’s environment, for example, touchscreen or mouse. These queries are placed at the end of your stylesheet.
A basic media query should look like this:
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}This code consists of a media type (print, screen, or all), media expression (a rule that must be passed for CSS to apply), and the CSS rules you want applied.
There you have it! A basic breakdown of media queries.