Theory: Media Queries

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:

@media (terms) {
  /* CSS code to execute for the given condition */
}

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

<style>
  @media (orientation: landscape) {
    /* When the site is oriented horizontally, the background color will be black
*/
    body {
      background: #FFF;
    }
  }

  @media (orientation: portrait) {
    /* When the site is oriented vertically, the background color will be black
*/
    body {
      background: #000;
    }
  }
</style>

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:

<style>
  /* Here are all the styles for devices with a viewport greater than 1400 pixels */

  @media (max-width: 1400px) {
    /* There are styles for devices with a viewport width less than or equal to 1400 pixels but greater than 990 pixels. They are styles for tablets and laptops with low resolution */
  }

  @media (max-width: 990px) {
    /* Styles for devices with a viewport width less than or equal to 990 pixels but greater than 770 pixels. These styles will work for some mobile devices and tablets */
  }

  @media (max-width: 770px) {
    /* Styles for devices with a viewport width less than or equal to 770 pixels. It is a lot of mobile devices */
  }
</style>

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:

<style>
  /* There are styles for devices with a viewport of less than 770 pixels */

  @media (min-width: 770px) {
    /* Styles for devices with viewport width more than or equal to 770 pixels */
  }

  @media (min-width: 990px) {
    /* Styles for devices with a viewport width more than or equal to 990 pixels but less than 1400 pixels */
  }

  @media (min-width: 1400px) {
    /* Styles for devices whose viewport width is more than or equal to 1400 pixels */
  }
</style>

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:

<style>
  @media (orientation: portrait) and (min-width: 600px) {
    .container {
      /* For devices in portrait mode and a viewport width of at least 600 pixels, make elements with the container class 100 percent wide */
      width: 100%;
    }
  }
</style>

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:

<style>
  @media (orientation: portrait), (min-width: 600px) {
    .container {
      /* For devices in portrait mode OR a viewport width of at least 600 pixels, make elements with the container class 100 percent wide */
      width: 100%;
    }
  }
</style>

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:

<style>
  @media not all and (orientation: landscape) {
    .container {
      /* For devices in portrait mode (NOT horizontal) we make items with the container class have a width of 100 percent */
      width: 100%;
    }
  }
</style>

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:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connecting CSS files</title>

    <!-- General styles for the project -->
    <link rel="stylesheet" href="style.css">

    <!-- Styles for screens with a viewport of at least 750px -->
    <link rel="stylesheet" media="screen and (min-width: 750px)" href="style750px.css">

</head>
<body>
    <!-- Project markup -->
</body>
</html>