Media queries: styles according to display conditions

Useful to know

A page can be opened in a narrow window, on a wide monitor, or in print mode. Media queries allows part of CSS to be applied according to such conditions. They can check display area characteristics, orientation, and certain user preferences. This provides an adaptation mechanism without the need for every possible size to have a completely separate document. The main task is for the rule to meet an actual need for the content. [1]

The @media construct sets a condition and a group of styles that are used when the condition matches. [2] The width itself is not a name for a specific device. A narrow window on a desktop computer can place similar restrictions as a phone, and a wide phone in a horizontal position can give a different space. Therefore, the threshold for change is easier to justify through page behavior than through a list of trade patterns.

Let's have a make-believe list of six books. With enough space, they can be located in several columns, and when narrowed, remain in one. The useful question is when the titles and buttons begin to be pressed. It is this observation that can hint at the place of change. If the threshold is selected randomly, it is possible that between two convenient demonstration widths, an intermediate size at which the page is difficult to read remains.

Conditions are not limited to size. Media queries may take into account, for example, a preference for reduced movement or the ability to specify with a device that supports holding over an item. [1, 2] This helps the adaptation to be viewed more broadly than rearranging columns. In a project with an animated gallery, we can separately describe what remains necessary for orientation and which part of the movement is only decorative. Thus, the change has a specific purpose for the person.

The practical check must include values around the selected threshold. We open the page shortly before the change, right at it and shortly after it. Then we use realistically long titles and different amounts of text. This approach detects problems not seen in an example with identical short captions. For printing, a separate printout view can be selected, rather than assuming that it must repeat every decorative element on the screen.

In maintenance, it is useful for conditions to be few, clearly grouped and associated with described changes. For example, "cards become one column when the text no longer fits comfortably" is an understandable ground. Only a number without a reason is more difficult to review after editing the content. Media queries provides the exact mechanism, and the good result comes from monitoring the page in a continuous range of conditions and from keeping its main task in each of the selected forms.