Viewport dimensions media queries

Image provided by Carbon

Yes, I’m talking about width, height, min-width, min-height, max-width and max-height.

Did they need presentation? I’ll be fast.

These features are used to set different styles for different screen sizes. They are super useful to build a responsive system.

Since the width and height features can set styles only for exact viewport size, it’s more likely you’ll use the max- and min- prefixes. For example, this code will apply styles if the viewport height is more than 320 pixels.

The red background will apply only if the viewport height is more than 320 pixels.

But you can also mix these features to handle a size range.

The red background will apply if the viewport width is between 320 and 600 pixels.

The following example show how the max-width feature can be used to change the background color based on the viewport width.

Orientation

Image provided by Carbon

Orientation is a nice media feature that let you make changes based on the orientation of the display. It can have two values: portrait and landscape.

But what does the browser consider portrait and what landscape? The portrait value will trigger changes everytime the height of the viewport is bigger than the width. Similarly, if the width is bigger than the height, the viewport will be “landscape”.

For example, this code produces the following result:

The red background will apply if the viewport orientation is landscape.

Aspect ratio

Image provided by Carbon

This is similar to the orientation media feature, but more accurate. You can set rules for the exact aspect ratio you need. For example, you can set different layout rules for 16/9 phones and new 18/9 phones.

This feature can also be prefixed with max- and min- to handle a range of aspect ratios.

Hover and pointer

Image provided by Carbon

Ok, I will try to explain these media feature as simple as I can, since they are kind of useful.

Both hover and pointer feature refers to the primary input mechanism of the website. A mouse, for example. Or a finger, if you are using a smartphone to surf the website. To refer to all the input mechanisms you can use the any-hover and any-pointer features.

Now, what they practically do?

The hover (and any-hover) features let the browser know if the primary input mechanism can hover elements.

You can use it in this way:

hover: hover , if the primary input mechanism can hover elements;

, if the primary input mechanism can hover elements; hover: none, if the primary input mechanism can’t hover elements, or there is no primary pointing input mechanism.

When should I use this? For example when you want to handle hover animation on mobile devices where the input mechanism (the finger), can’t hover elements.

The pointer (and any-pointer) features let the browser know if the primary input mechanism has a pointing device (for example, a mouse) and how accurate it is.

You can use it in this way:

pointer: coarse , if the primary input mechanism includes a pointing device of limited accuracy;

, if the primary input mechanism includes a pointing device of limited accuracy; pointer: fine , if the primary input mechanism includes an accurate pointing device;

, if the primary input mechanism includes an accurate pointing device; pointer: none, if the primary input mechanism does not include a pointing device.

This is useful for example to expand click area on devices with non accurate pointing device.