A Comprehensive Guide to Media Queries in CSS

#webdev #css #learning #beginners

Today, people use differently-sized devices, including smartphones, tablets, and laptops to access the internet. Since screen sizes differ from user to user, creating websites that respond to varying screen sizes, no matter the device, is essential. That’s where CSS media queries come in. But what are media queries, and how do they work? The following guide provides a detailed overview of media queries in CSS.

What is a Media Query?

A media query is a CSS feature that allows you to apply certain styles on a website browser depending on your users’ device or viewport. Nevertheless, media queries can target many other things apart from the viewport, including orientation and resolution. According to the Web Design Museum, media queries were first introduced in the 1990s, but they became popular in the late 2000s and 2010s with the increase in mobile phone manufacturing and usage. These days, media queries are vital to creating responsive web designs for excellent appearance and functionality.

Media Query Syntax

@media(media type) operator (media feature) {
/*css styles*/
}

The example above represents a media query. Let’s dissect each part of the query for a better understanding.

@media

The first part of a media query anatomy is the @media keyword, the at-rule. It is a logical operator for defining specific media types and features that must be met for a particular CSS style to run.

Media Type

Media type, which specifies the targeted media, is the second item in a media query. Since various media types exist, media types can define one or more devices. The media type is optional and automatically set to all if not specified. We can combine multiple media types with a comma. Here are the most popular values for media queries:

All: Targets all devices
Screen: Targets devices with a screen
Print: Targets devices with a preview mode
Speech: Targets speech devices

@media all {
/*CSS styles targeting all devices*/
}

@media screen {
/*CSS styles for screen devices*/
}

/*(,) comma combines multiple media types*/
@media print, speech {
/*CSS styles for print and speech devices*/
}

Media Features

After targeting specific media types, you can indicate the media features you want to modify. These media features are the conditions that must be fulfilled to run the CSS code put in the query. The media features can include page characteristics, display quality, user preference, interaction, color, and more. Here are some popular media features:

Height: Defines the height of the viewport
Width: Defines the width of the viewport
Orientation: Defines the viewport’s orientation (landscape or portrait)
Resolution: Defines the number of pixels a device can render

Operator(s)

Media queries accept logical operators, instrumental in creating complex queries and combining several queries into a single rule separated by commas.

and

We can use the operator to include multiple media features in the same query. In addition, we can apply the operator to create a range for our media types.

/*and combines two media queries*/
@media screen (min-width: 280px) and (resolution: 1) {
/*CSS styles run if the media features for both media types are true*/
}

/*and allows us to include a range for our media features*/
@media screen (min-width: 280px) and (max-width: 680px) {
/*CSS styles run if both media features are true*/
}

or

We can use the or operator in a media query if only one of the targeted media features must be met. Contrary to common practice, applying the or operator in media queries involves separating the media features with a comma.

/*or separates two media features*/
@media screen (min-width: 680px) , (orientation: portrait) {
/*CSS styles run if either one of the media features is true*/

not

The not operator negates parts of or an entire media query depending on its position. Since the not operator nullifies everything following it, using a comma-separated list effectively applies it to certain parts of the query.

/*not negates the entire media type*/
@media not screen and (min-resolution: 1) {
/*CSS styles for devices without screens and a minimum resolution of 1*/
}

/*not negates a section of the media type*/
@media (not speech) and (orientation: landscape) {
/*CSS styles for non-speech devices with landscape orientation*/
}

only

Unlike the other operators we’ve discussed, the only operator is unique since it hides the query for legacy user agents. However, the operator does not affect modern browsers.

/*Older browsers don’t understand the only operator, so they ignore it*/
@media only all (min-height: 320px) and (max-height: 1280px), (orientation: landscape) {
/*CSS styles for all devices, except devices with old browsers*/
}

Media Query Best Practices

We can follow various best practices when applying media queries for better results.

1. Employ the mobile-first approach

One valuable best practice when creating media queries is implementing a mobile-first approach. This involves crafting your website to fit small screens first and then scaling up to larger screens. Besides reaching a large audience, a mobile-first approach will ensure your website is accessible on all screen sizes.

2. Prioritize Logical Breakpoints

Using logical breakpoints based on your website’s content instead of applying fixed breakpoints related to standard screen sizes is another good practice. Unlike logical breakpoints, which are natural, fixed breakpoints can change over time.

3. Test and Improve

Don’t forget to test and improve your media queries to ensure your website is accessible on different devices and browsers. After all, refining media queries to optimize performance can render your website superior and user-friendly.

Bottom Line

Media queries are essential in creating responsive web designs for users to access across different screen sizes, devices, and browsers. For that reason, developers should take advantage of media queries to craft dynamic and user-centric products. Thus, a proper understanding of media queries is fundamental to exploring their full potential in web development.