8. Media Queries

Media Query Basics

Now, let’s take a look at the syntax around implementing a media query. The simplest way to express that is this general setup:

It consists of:

• A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).
• A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.
• A set of CSS rules that will be applied if the test passes and the media type is correct.

Media Query Introduction

In this video, we will cover CSS media queries before we go over the various properties of media queries in more depth.

Source: Web Dev Simplified
Media types

The possible types of media you can specify are:

• <all>
• <print>
• <screen>
• <speech>

For instance, the following media query example will only set the body to 12px if the page is printed. It will not apply when the page is loaded in a browser.

Media feature rules

After specifying the type, you can then target a media feature (for example, width and height) with a rule.

The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features.

These features are used to create layouts that respond to different screen sizes. For example, to change the body background color to red if the viewport is exactly 600 pixels, you would use the following media query:

This repl.it shows what it looks like in reality. Try to adjust the screen size to see the red background appear and disappear.

A more common way to set the width (and height) media features are as ranges. This can be done using the prefix min- or max- to indicate that the given value is a minimum or maximum, respectively. For example, to make the background color blue if the viewport is at or narrower than 400 pixels, use max-width:

Open this repl.it to see how it works in reality. Once again, adjust the screen size to see the blue background appear once the screen size is at 400 pixels or less.

There are a number of other media features that you can test for. Although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support, each feature is documented on MDN along with browser support information. and you can find a full list at Using Media Queries: Media Features.

Orientation

One well-supported media feature is orientation, which allows us to test for portrait or landscape mode. To change the background color if the device is in landscape orientation, use the following media query.

A standard desktop view has a landscape orientation. But a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.

Use of pointing devices

As part of the Level 4 specification, the hover media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover. Here is a code example:

If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.

Also in Level 4 is the pointer media feature. This takes three possible values: none, fine, and coarse. A fine pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A coarse pointer is your finger on a touchscreen. The value none means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.

Using pointer can help you design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.

More complex media queries

With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.

• and logic in media queries

To combine media features, they are done in much the same way as we have been practicing above. For example, we might want to test for a min-width and orientation. The body background color will only be green if the viewport is at least 400 pixels wide AND the device is in landscape mode.

• or logic in media queries

If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the background-color will be brown if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true, then the query matches.

• not logic in media queries

You can negate an entire media query by using the NOT operator. This reverses the meaning of the entire media query. Therefore in this next example the background color will only be yellow if the orientation is portrait.