Register to get access to free programming courses with interactive exercises

Media queries and other devices CSS: Site Adaptability

Using media queries as a condition allows you not only to set the width/height and orientation of the screen, but also to specify the precise device that the styles will be applied for.

The CSS3 standard defines 4 basic types of devices that can be specified as media query conditions:

  • all — all available devices. This type is used by default, so you don't have to specify it.
  • print — printers. These styles are used when printing a web page. Separate printable CSS is very much 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. This includes both refrigerator displays and 4K monitors
  • speech — screen readers. This is text reading software that helps vision impaired people perceive the information on the page.
<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 also allows you to enter the specific characteristics of the device for which you want to apply styles. The main features that most browsers support are:

  • color. The number of bits of color the device is capable of reproducing. If no value is specified, it checks that the device can reproduce color.
  • monochrome. Whether or not the device is monochrome The device is monochrome if it can reproduce only two primary colors, black and white, and shades of gray. These include ebooks.
  • orientation. Self-explanatory. This characteristic was discussed in more detail in the last lesson.
  • aspect-ratio. his characteristic 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 to make the styles for that resolution apply. For example, you can specify 16/9, 32/18, 1280/720 and even 2560/1440.

Screen aspect ratios

  • device-aspect-ratio. A characteristic similar to aspect-ratio, but that 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.


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

From a novice to a developer. Get a job or your money back!

Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

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.