Register to get access to free programming courses with interactive exercises

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.

Horizontal and 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

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>

Hexlet Experts

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

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.