CSS Media Queries
📣 Sponsor
It used to be that various techniques were employed to target specific mobile devices, including Javascript. In the past, we even had Internet Explorer specific HTML tags to target only those browsers.
Thankfully, those days are long gone, and we are left with a standardised set of media queries. In this section, we'll be covering how they work.
Syntax
Media queris follow the same @ syntax used by CSS Animations. We can put CSS within a media query to say that it only runs if the criteria of that media query are met.
This lets us target smaller screens, amongst other things. Consider the following example:
div {
color: red;
}
@media screen and (max-width: 1000px) {
div {
color: blue;
}
}
The above code sets all divs to be red. Then, if the screen viewport becomes less than 1000px, either because it is a mobile device, or the user resized the window, all divs will suddenly have blue text.
Notice that we mentioned screen and used the and keyword to chain multiple criteria. We have mentioned screen, but this can also be set to print for printed documents, or all for both. Let's take a look at some of the most useful media queries available today.
Max/Min
As discussed, we can set a max-width, i.e. styles that only exist if the viewport is smaller than that width. However, we can also set a min-width, which is only for screens or devices above a certain size. The syntax is similar:
@media (min-width: 300px) {}
@media (max-width: 1000px) {}
Heights
We also have similar settings for height, as shown below:
@media (min-height: 200px) {}
@media (max-height: 800px) {}
Specific Widths and Heights
Although we can use maximum and minimum widths, we can also use the keywords width or height to select screen sizes between two values. An example is shown below:
@media (200px <= width <= 1000px) { }
This will target only screens between 200px and 1000px, which is more useful in some situations than having two separate clauses. The same can be done for height.
Orientation
Ever wanted to target phones only in landscape orientation? We can do that with media queries. Orientation accepts two values, either portrait or landscape. An example is shown below:
@media (orientation: landscape) { }
Resolution
We can select pages by screen resolution, too. The below media query selects any screens with a pixel density more than 1.2. This is useful, because it also takes into account page zoom. For printed documents, we usually use dpi.
@media screen and (resolution > 1.2dppx) { }
@media print (resolution > 300dpi) { }
Hover and Pointer
Hover is very useful, since it lets us target pages which have hover capability. That means a page where the user can hover a mouse over it. Since most touch phones don't have this, thye will not be targeted:
@media screen and hover {
/* Only devices with hover capability, i.e. with mouses */
}
Pointer
Less used, but divides between devices with fine input mechanisms, i.e. touchpads, mice, or styluses, and those with more 'corase' inputs, like touchpads. As such, it can be set to coarse, fine or none, none meaning there is no input pointer.
@media screen and (pointer: coarse) {
/* Devices with inputs like touch, but no mouse pointer */
}
@media screen and (pointer: fine) {
/* Devices with mouse pointers or styluses */
}
@media screen and (pointer: none) {
/* Devices with no pointers */
}
Interlaced and Progressive
Some devices render one line of pixels alternatively, allowing for a higher fps value. This is called interlaced, and usually on these screens fast movements are avoided to avoid combing or items appearing on one line, but not on the other. Progressive screens don't have that problem. We can thus minimise movement for some old plasma TV screens using this media query with interlaced:
@media screen (scan: interlaced) {}
@media screen (scan: progressive) {}
Aspect Ratio
This lets us target specific aspect ratio screens, and show content differently. This is useful if we expect our pages to be displayed on a variety of different screens. We can also set min and max values.
@media (min-aspect-ratio: 16/9) {}
@media (max-aspect-ratio: 16/10) {}
@media (aspect-ratio: 4/3) {}