Hexlet logo

CSS: Site Adaptability

Theory: Media queries and other devices

Using media queries as a condition allows you to set the width/height and screen orientation. Also, it helps to specify the device for which we want to apply the styles.

The CSS3 standard defines four basic types of devices. We can specify them as media query conditions:

  • all — all available devices. This type is the default, so you don't have to specify it
  • print — printers. These styles help to print a web page. Separate printable CSS is in demand when creating online stores because users often print the page with the product they want
  • screen — all the screens of the different devices. It includes both refrigerator displays and 4K monitors
  • speech — screen readers or text-reading software. It helps vision-impaired people perceive the information on the page

Let us observe the example below:

<style>
  /* Site styles */

  @media print {
    /* Styles for printing the page */
  }

  @media speech {
    /* Styles for screen readers */
  }
</style>

You can specify the device type when connecting a CSS file as you can with other media queries:

<!DOCTYPE html>
<html lang="eng">
<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 printing the page -->
    <link rel="stylesheet" media="print" href="print.css">

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

In addition to specifying a particular type of device, CSS allows you to enter the device's specific characteristics for which you want to apply styles.

The main features that most browsers support are:

  • color. The number of color bits the device is capable of reproducing. If no value is specified, it checks that the device can reproduce color

  • monochrome. The device is monochrome if it can reproduce only two primary colors, black and white, and shades of gray. These include ebooks

  • orientation. It is a self-explanatory characteristic, which we discussed in more detail in the last lesson

  • aspect-ratio. It shows the aspect ratio of the viewport. For example, 16/9 or 4/3. If the viewport resolution is 1280x720, aspect-ratio can take any multiple of that resolution. That way, we can make the styles for that resolution to apply. For example, you can specify 16/9, 32/18, 1280/720, and even 2560/1440:

    Screen aspect ratios

  • device-aspect-ratio. A characteristic is similar to aspect-ratio. It takes into account the resolution of the device itself rather than the viewport resolution:

    <style>
  /* Site styles */

  @media (color) {
    /* Styles for color devices */
  }

  @media (device-aspect-ratio: 16/9) {
    /* Styles for devices with a 16:9 screen ratio */
  }
</style>

Additional materials

Do it yourself

Create any page on your computer and try adding all the features in the media query condition so that the styles work on your computer.

Recommended programs

Navigation
Theory
Tests
Exercise