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 monitorsspeech— 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-ratiocan 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.
device-aspect-ratio. A characteristic similar toaspect-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.
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“
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.
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
Our graduates work in companies:
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
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.