In this article, we shall continue with CSS Selectors, and we will see a few advanced selectors, as opposed to the basic ones covered in our previous article. To be precise, in this article we shall mainly cover Media Query.
What and why do we use the Media Query?
The major aspect of responsive design is to create the right experience for the right device. With different devices on the market, this can be a big task. Hence, I have come up with the media queries that can be used to target designs.
@media query helps to identify the breakpoints of the device, in order to target the particular media or device, and thereby deliver specified designs accordingly. The @media query is given to determine such parts or points of the design that will have a different behaviour on each side of the breakpoint.
The basic design rule:
Always Design for Mobile First – Obvious as it sounds, it is advisable always to design for the mobile first, before designing for a desktop or any other device. The reason to follow this is to make the pages display faster on smaller devices.
First, let us see the list of Media Query Logic Operators:
And – Combine multiple query tests together. ‘and’ keyword is used to combine multiple media features together, as well as with media types. This is a basic media query, a single media feature with the implied all media type.
Format example:
If this is your specification,
@media (min-width: 480px) { ... }
And if you want this to apply only if the display is in landscape, you can use an ‘and’ operator as follows:
@media (min-width: 480px) and (orientation: landscape) { ... }
Furthermore, you can change the media type, too, as follows:
@media tv and (min-width: 900px) and (orientation: landscape) { ... }
, – comma separated lists as logical “or”. When using such a comma-separated list of media queries, the styles or style sheets get applied even if any one of the media queries returns true. This is the logical ‘or’ function. Also, each media query in such a list separated by commas is treated as an individual query.
Example:
@media (min-width: 900px), handheld and (orientation: landscape) { ... }
In this, if on a device with a viewport width of 901px, the return value would be true since the first part, interpreted as @media all and (min-width: 900px) would mean true, despite the device failing the next media query.
Not – This will negate the media query, or falsify it. This will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. But, the ‘not’ keyword cannot be used to negate an individual feature in the query. It will apply to the entire media query.
Example:
@media not all and (monochrome) { ... }
Will get evaluated as below:
@media not (all and (monochrome)) { ... }
And not as below:
@media (not all) and (monochrome) { ... }
Another example:
@media not screen and (color), print and (color) { ... }
Only – legacy browser support, and used to specify to a particular entity. The ‘only’ keyword is still supported only by older browsers. The modern browsers no longer support this logic operator.
Example:
link rel="stylesheet" media="only screen and (color)" href="example.css"
Next, the main part – the Media Features:
1. aspect-ratio – This is the aspect ratio of the targeted display area of the output device.
Example: @media screen and (min-aspect-ratio: 1/1) { … }
For widescreen displays: @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { … }
2. color – The number of bits per color component for the output device. This is to apply a style sheet to all color devices.
Example format: @media all and (color) { … }
The following will apply a style sheet to devices with at least 4 bits per color component: @media all and (min-color: 4) { … }
For example : color:4 max-color:4
3. color-index – The number of colors the device can display. Indicates the number of entries in the color.
Format: @media all and (color-index) { … }
Example:
4. device-aspect-ratio: The ratio between the width and the height of the device
for example: device-aspect-ratio:1/1
5. device-height – The height of the device, such as a computer screen
6. device-width – The width of the device, such as a computer screen
7. grid – Whether the device is a grid or bitmap
8. height – The viewport height
9. min-device-width – The minimum width of the device, such as a computer screen
10. min-device-height – The minimum height of the device, such as a computer screen
11. monochrome – The number of bits per “color” on a monochrome (greyscale) device.
Format: @media all and (monochrome) { … }
12. orientation – Indicates the landscape or portrait mode of the viewport.
Format: @media all and (orientation: portrait) { … }
13. resolution – Obvious to the name, it shows the resolution (which means pixel density) of the output device. The resolution is usually given in dots per inch (dpi) or dots per centimeter (dpcm).
Format: @media print and (min-resolution: 300dpi) { … }
14. scan – The scanning process of the output device.
Format: @media tv and (scan: progressive) { … }
15. grid – The output device is usually classified as grid bitmap. For a grid-based device, the value will be 1. Else (for a bitmap device) it will be 0.
Format example: @media handheld and (grid) and (max-width: 15em) { … }
An example of using media query:
link rel="stylesheet" media="(min-width: 480px)" href="example.css"
< !—This is the usage of a media query inside a stylesheet -->
@media (min-width: 768px) {
.facet_sidebar {
display: none;
}
}
These are all the basics of the Media Query, which is an important component of the trending responsive design concept of front end user experience. Happy reading…
