Chapter 6. Using Media Queries
Media Queries have a history in CSS2 as a way to specify which styles are applied to different media. Originally, these attributes were setting media=“screen” and/or media=“print” when defining the styles for your site and printer to render the page.
The curious and beneficial path that today’s media query is heavily involved in is allowing styles to be applied based on the width of the screen viewing the site. That is not to say that width is the only expression that can be used as other expressions such as color depth, pixel density, and even the aspect ratio can be used with media queries.
If you have ever dabbled in coding HTML, you have undoubtedly seen a call to a CSS file that has looked something similar ...