Media queries and other devices — CSS: Site Adaptability

Additional materials
Do it yourself

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:
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

W3C standard
Support for browser features

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.

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