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:
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
The possible types of media you can specify are:
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,
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
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
height) media features are as ranges. This can be done using the prefix
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
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.
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:
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.
andlogic 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
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.
orlogic 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.
notlogic 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.