What Are Media Queries?
Media queries are essentially conditionals that check for media features and allow us to style our pages based on those features. With the advent of mobile devices like smartphones and tablets, it became important to target these different devices to create websites that worked for them. Media queries were essential to this process as they can be used to specify styles based on more than a dozen different media features (https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features) (e.g.,
resolution, etc.). However, with the development of more flexible layouts like Flexible Box Layout Module (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) and Grid Layout (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids), it has become less important to use all of these features to target specific devices. Instead, it is recommended to use media queries to add breakpoints where your design breaks.
Breakpoints are specified
width lengths where your layout changes to accommodate the larger or smaller viewport. Breakpoints should be based on your design and content and not on specific devices. You want to target the widths where things start to go wrong in your layout (e.g., elements overlap or become too small, lines become too long to read comfortably, a lot of extra space is available, etc.).
Media queries can also be used to style pages for different media types (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types). A common example of this is creating a different design for how a website looks when it is printed. This may include removing darker background colors, removing unnecessary images and advertisements, adjusting the font to be better suited for printing, etc.
Media queries are performed using the
@media at-rule. The syntax is below: