CSS: Site Adaptability
2026-02-21 23:41 Diff
https://hexlet.io/courses/css-adaptive/lessons/media-queries/theory_unit

One of the most helpful tools in adaptive layout design is media queries. Media queries are special conditional constructions that allow you to apply styles only to specific devices.

We can use media queries as follows:

Different values and constants can act as conditions. Let us observe them in more detail.

Screen orientation

To determine the orientation of the screen, we use the orientation key, which can have one of two values:

  1. landscape. An orientation in which the width of the viewport is more than its height. This condition is true for devices with horizontal screen orientation.
  2. portrait. An orientation where the height of the viewport is more than its width. The condition is true for devices with a vertical screen orientation

Screen resolution

Using media queries, we can also base it on the width or height of the viewport. We can do it using the usual CSS rules:

  • width, min-width, max-width for width
  • height, min-height, max-height for height

These conditions help to create breakpoints. These are the boundaries of the values by which we modify our layout. Such stopping points allow you to have rules for monitors, tablets, phones, fridges, and anything:

Note the order of the properties. Remember that CSS is a cascading sheet, so you need to take note of the order of style. In this case, the default style is not in the media query. We apply it to the element first.

Then we apply the styles depending on the values in the media query condition. For example, with a viewport_ 770 width of 770 pixels for an element, we apply the styles in the following order:

  • Default Styles
  • Styles for the media query condition max-width: max-width: 1400px
  • Styles for the media query condition max-width: max-width: 990px
  • Styles for the media query condition max-width: max-width: 770px

The approach described above is called Desktop First. We start by writing styles for large monitors. Then, using media queries, we add styles for progressively smaller viewport values. Its characteristic feature in media queries is to use the max-width construction as a condition.

Alongside the Desktop First, we also have the Mobile First approach. Its peculiarity is that it first writes styles for mobile devices. Then, we use media queries and write styles for larger viewport sizes. Desktop First used max-width, but Mobile First — min-width.

Styles written using the Mobile First approach are as follows:

Logical operators

We can combine conditions within media queries. There are three logical operators for this.

Logical AND. Several conditions must be met for CSS styles to apply to an element. Let us make a condition that verifies that the screen is in portrait mode and has a viewport width of at least 600 pixels:

Logical OR. We apply the properties if we meet at least one of the conditions, separated by commas. Let us take the last example and apply it using OR:

Logical NOT. These properties are applied if we do not meet the condition. Developers rarely use this operator because the result of its use is far from intuitive. In this regard, we advise you to refrain from using the not keyword as the first choice:

Using media queries when connecting CSS

We can write media queries in CSS files and HTML if there is a style file. In this case, we specify the media query in the media attribute: