MEDIA QUERIES

CSS MEDIA QUERIES

Multimedia queries in CSS3 have extended the idea of CSS2 media types. Instead of looking for a device type, they look at the capacity of the device. Multimedia queries can be used to verify many things, for example:

• window width and height
• width and height of the device
• orientation (is the tablet / phone in landscape or portrait mode?)
• resolution

Using media queries is a popular technique for providing a custom style sheet to desktops, laptops, tablets, and mobile phones (such as iPhones and Android phones).

SYNTAX

A media query consists of a media type and can contain one or more expressions, which resolve to true or false. Media Queries are essential for managing page behavior by device type or based on specific parameters such as screen resolution or browser width. Media Queries (also known as Media Queries) are CSS declarations with which it is possible to identify the type of device or a characteristic of it in order to apply different styles or conditions based on a list of rules.

CHARACTERISTICS OF THE MEDIA QUERIES

They are used, for example, to manage different behaviors on different resolutions (hide an element or change its size on small screens) or to change the structure of a document during printing (eliminating advertising or the useless navigation menu on paper/pdf). Due to their characteristics they are a widely used tool when developing from a Responsive perspective. The query result is true if the specified media type matches the device type on which the document is displayed and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Unless you use the not or only operators, the media type is optional and the all type will be implied. You can also have different style sheets for different media.

TYPES OF MEDIA QUERIES

The type (media-type) indicates the category of a device and if it is not expressly indicated, the most generic correspondence possible will be used.

• all identifies all devices
• print is intended for print mode, so it will modify a document or page in its printable version.
• screen for screens, tablets or smartphones.
• speech dedicated to speech synthesizers or for screen readers who read the page aloud.

MEDIA FEATURES

Media-features are declarations used in Media Queries that allow you to intercept particular characteristics or “states” of the device used. The complete list contains many but the most useful ones can be summarized in this table:

The most basic mode of use, which can be fine in most cases, is intended to manipulate the visibility or style of the elements based on the maximum width (max-width) of the device.

@media all and (max-width: 1690px) { …}

@media all and (max-width: 1280px) { …}

@media all and (max-width: 980px) { … }

@media all and (max-width: 736px) { … }

@media all and (max-width: 480px) { … }

Each of these rules is essentially valid for any device (due to the use of all) and is applied as long as the width of the display area does not exceed a certain value expressed in px. When these conditions are not met, a different Media Queries will be activated or more simply the basic styles will be inherited.

The values ​​used in the example are not to be considered as a reference: different devices can have very different characteristics (just think of the difference in resolution between an iPhone 5 and an iPhone X). It is therefore essential to think at the design stage which devices are really turning to in order to find the most correct rule.

LOGICAL OPERATORS

Logical operators are used to structure a Media Queries that meets more than one condition at a time. There are four types:

and Combine multiple conditions that must be met at the same time

not To create an exclusion rule (media-type must be specified)

only Apply rules only if there is a direct match (media-type must be specified)

, (comma) It is used to combine multiple Media Queries into a single rule; each declaration, separated by commas, will be analyzed individually (so it is sufficient that one of the conditions is true). For example, using the logical operator and it is also possible to work on a range of sizes by specifying the minimum (min-width) and maximum (max-width) range.

/* Large or high resolution screens*/

@media all and (max-width: 1690px) { … }

/* Desktop or Portable Screens */

@media all and (min-width: 1280px) and (max-width: 1689px) { … }

/* Tablet in landscape mode*/

@media all and (min-width: 737px) and (max-width: 1279px) { … }

/* Tablet in portrait mode */

@media all and (min-width: 481px) and (max-width: 736px) { … }

/* Smartphones or small tablets*/

@media all and (max-width: 480px) { … }

This syntax helps to intercept and propose more specific interface variations based on resolution recognition. In this way, breakpoints will be defined, that is, points on an imaginary line (which goes from 0 to infinity) in which a condition will begin to be true and consequently all the styles within it will be applied.

EXAMPLES OF USE

Rules can be used and mixed in very different ways and this allows you to easily interact with any type of situation.

Screen devices only and at most up to 800px in height.

@media only screen and (max-height: 800px) { … }

All devices except the media-type of type print and which have a width of at least 640px.

@media not print and (min-width: 640px) { … }

All devices with a minimum height of 680px or all screens with portrait orientation (which corresponds to vertical orientation in the case of smartphones for example).

@media (min-height: 680px), screen and (orientation: portrait) { … }

These are the breakpoints of the Bootstrap 4 grid.

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) { … }

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) { … }

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) { … }

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) { … }

PROCEDURE WITH THE CHROME INSPECTOR TO VERIFY THE WRITTEN CODE

• Display the HTML page, then open the F12 key Chrome inspector on Windows

• Select the box at the top left highlighted in the figure
• Change the resolution to see how the background color changes.

CSS LAYOUT

Here are some examples of responsive layouts.

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB