0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p>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.</p>
1
<p>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.</p>
2
<p>The CSS3 standard defines four basic types of devices. We can specify them as media query conditions:</p>
2
<p>The CSS3 standard defines four basic types of devices. We can specify them as media query conditions:</p>
3
<ul><li>all - all available devices. This type is the default, so you don't have to specify it</li>
3
<ul><li>all - all available devices. This type is the default, so you don't have to specify it</li>
4
<li>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</li>
4
<li>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</li>
5
<li>screen - all the screens of the different devices. It includes both refrigerator displays and 4K monitors</li>
5
<li>screen - all the screens of the different devices. It includes both refrigerator displays and 4K monitors</li>
6
<li>speech - screen readers or text-reading software. It helps vision-impaired people perceive the information on the page</li>
6
<li>speech - screen readers or text-reading software. It helps vision-impaired people perceive the information on the page</li>
7
</ul><p>Let us observe the example below:</p>
7
</ul><p>Let us observe the example below:</p>
8
<p>You can specify the device type when connecting a CSS file as you can with other media queries:</p>
8
<p>You can specify the device type when connecting a CSS file as you can with other media queries:</p>
9
<p>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.</p>
9
<p>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.</p>
10
<p>The main features that most browsers support are:</p>
10
<p>The main features that most browsers support are:</p>
11
<ul><li><p>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</p>
11
<ul><li><p>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</p>
12
</li>
12
</li>
13
<li><p>monochrome. The device is monochrome if it can reproduce only two primary colors, black and white, and shades of gray. These include ebooks</p>
13
<li><p>monochrome. The device is monochrome if it can reproduce only two primary colors, black and white, and shades of gray. These include ebooks</p>
14
</li>
14
</li>
15
<li><p>orientation. It is a self-explanatory characteristic, which we discussed in more detail in the last lesson</p>
15
<li><p>orientation. It is a self-explanatory characteristic, which we discussed in more detail in the last lesson</p>
16
</li>
16
</li>
17
<li><p>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:</p>
17
<li><p>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:</p>
18
</li>
18
</li>
19
<li><p>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:</p>
19
<li><p>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:</p>
20
</li>
20
</li>
21
</ul><h2>Additional materials</h2>
21
</ul><h2>Additional materials</h2>
22
<ul><li><a>W3C standard</a></li>
22
<ul><li><a>W3C standard</a></li>
23
<li><a>Support for browser features</a></li>
23
<li><a>Support for browser features</a></li>
24
</ul><h2>Do it yourself</h2>
24
</ul><h2>Do it yourself</h2>
25
<p>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.</p>
25
<p>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.</p>