Media Queries — CSS: Site Adaptability

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

Media queries are written as follows:

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

Different values and constants can act as conditions. The following constructions are often used:

Screen orientation

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

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

<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

When using media queries, we can also base it on the width or height of the viewport. This is done using the usual CSS rules of width, min-width, max-width for width and height, min-height, max-height for height.

These conditions are used to create breakpoint. These are the boundaries of the values by which our layout is modified. Such stopping points allow you to have rules for monitors, tablets, phones, fridges, anything.

<style>
  /* Here there'll be all the styles for devices with a viewport greater than 1400 pixels. */

  @media (max-width: 1400px) {
    /* Styles for devices whose viewport width is less than or equal to 1400 pixels, but greater than 990 pixels. These styles will be used for tablets and laptops with low resolution */
  }

  @media (max-width: 990px) {
    /* Styles for devices whose viewport width is 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 whose viewport width is less than or equal to 770 pixels. That's a lot of mobile devices */
  }
</style>

Note the order in which the properties are written. Remember that CSS is a cascading sheet, so you need to take note of the orders of style. In this case, the default style, which isn't in the media query, will be applied to the element first, then the styles will be applied one by one depending on the values in the media query's condition.

For example, with a viewport 770 width of 770 pixels for an element, the styles will be applied 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, and then, using media queries, we add styles for progressively smaller viewport values. Its characteristic feature in media queries is the use of the max-width construction as a condition.

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

Styles written using the Mobile First approach are as follows:

<style>
  /* Here there'll be all the styles for devices with a viewport less than 770 pixels. */

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

  @media (min-width: 990px) {
    /* Styles for devices whose viewport width is 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

Conditions within media queries can be combined. There are three logical operators for this:

• Logical «AND». It means that several conditions must be met for CSS styles to apply to an element. Let's make a condition that verifies that the device's screen is in portrait mode andand 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». The properties will be applied if at least one of the conditions is met. Conditions for this are separated by commas. Let's 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 the condition is not met. This operator isn't used often, as the result of its use is far from intuitive. In this regard, I advise you to refrain from using the not keyword at first.

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

Using media queries when connecting CSS

Media queries can be written not only inside CSS files, they can also be used in HTML when you include a style file. In this case, the media query is specified 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>

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“