0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Медиа-запросы в качестве условия позволяют не только выставлять ширину/высоту и ориентацию экрана, но и более конкретно указывать устройство, для которого будут применены стили.</p>
1
<p>Медиа-запросы в качестве условия позволяют не только выставлять ширину/высоту и ориентацию экрана, но и более конкретно указывать устройство, для которого будут применены стили.</p>
2
<p>В стандарте CSS3 определены 4 основных типа устройств, которые возможно указать в качестве условия медиа-запроса:</p>
2
<p>В стандарте CSS3 определены 4 основных типа устройств, которые возможно указать в качестве условия медиа-запроса:</p>
3
<ul><li>all - все доступные устройства. Этот тип используется по умолчанию, поэтому указывать его не обязательно.</li>
3
<ul><li>all - все доступные устройства. Этот тип используется по умолчанию, поэтому указывать его не обязательно.</li>
4
<li>print - принтеры. Эти стили используются при печати веб-страницы. Отдельный CSS для печати очень востребован при создании интернет-магазинов, так как пользователи зачастую распечатывают страницу с нужным им товаром.</li>
4
<li>print - принтеры. Эти стили используются при печати веб-страницы. Отдельный CSS для печати очень востребован при создании интернет-магазинов, так как пользователи зачастую распечатывают страницу с нужным им товаром.</li>
5
<li>screen - все экраны различных устройств. Сюда входят как дисплеи холодильников, так и 4К-мониторы.</li>
5
<li>screen - все экраны различных устройств. Сюда входят как дисплеи холодильников, так и 4К-мониторы.</li>
6
<li>speech - скринридеры. Это программное обеспечение для чтения текста, помогающие незрячим людям воспринимать информацию на странице.</li>
6
<li>speech - скринридеры. Это программное обеспечение для чтения текста, помогающие незрячим людям воспринимать информацию на странице.</li>
7
</ul><p>Так же, как и с остальными медиа-запросами, тип устройства можно указывать при подключении CSS-файла:</p>
7
</ul><p>Так же, как и с остальными медиа-запросами, тип устройства можно указывать при подключении CSS-файла:</p>
8
<p>Помимо указания конкретного типа устройства, CSS позволяет указывать и особые характеристики устройства, для которого необходимо применить стили. Основными характеристиками, которые поддерживают большинство браузеров, являются:</p>
8
<p>Помимо указания конкретного типа устройства, CSS позволяет указывать и особые характеристики устройства, для которого необходимо применить стили. Основными характеристиками, которые поддерживают большинство браузеров, являются:</p>
9
<ul><li>color. Количество бит цвета, которое способно воспроизвести устройство. Если значение не указано, то проверяется, что устройство может воспроизводить цвет.</li>
9
<ul><li>color. Количество бит цвета, которое способно воспроизвести устройство. Если значение не указано, то проверяется, что устройство может воспроизводить цвет.</li>
10
<li>monochrome. Монохромность устройства. Устройство является монохромным, если может воспроизводить только два основных цвета - чёрный и белый, а также их оттенки. Такими устройствами являются некоторые электронные книги.</li>
10
<li>monochrome. Монохромность устройства. Устройство является монохромным, если может воспроизводить только два основных цвета - чёрный и белый, а также их оттенки. Такими устройствами являются некоторые электронные книги.</li>
11
<li>orientation. Ориентация устройства. Подробнее эта характеристика была рассмотрена в прошлом уроке.</li>
11
<li>orientation. Ориентация устройства. Подробнее эта характеристика была рассмотрена в прошлом уроке.</li>
12
<li>aspect-ratio. Характеристика, показывающая соотношение сторон<em>viewport</em>. Например<em>16/9</em>или<em>4/3</em>. Если разрешение<em>viewport</em>равняется 1280x720, то aspect-ratio может принимать любые кратные этому разрешению числа, чтобы применились стили для данного разрешения. Например, можно указать<em>16/9</em>,<em>32/18</em>,<em>1280/720</em>и даже<em>2560/1440</em>.</li>
12
<li>aspect-ratio. Характеристика, показывающая соотношение сторон<em>viewport</em>. Например<em>16/9</em>или<em>4/3</em>. Если разрешение<em>viewport</em>равняется 1280x720, то aspect-ratio может принимать любые кратные этому разрешению числа, чтобы применились стили для данного разрешения. Например, можно указать<em>16/9</em>,<em>32/18</em>,<em>1280/720</em>и даже<em>2560/1440</em>.</li>
13
</ul><h2>Рекомендуемые программы</h2>
13
</ul><h2>Рекомендуемые программы</h2>