0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Руководства</a></p>
1
<p><a>#Руководства</a></p>
2
<ul><li>12 июл 2023</li>
2
<ul><li>12 июл 2023</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>С помощью медиазапросов можно адаптировать сайт под любой экран: от смартфона до рекламных стендов.</p>
4
</ul><p>С помощью медиазапросов можно адаптировать сайт под любой экран: от смартфона до рекламных стендов.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.</p>
6
<p>Журналист, изучает Python. Любит разбираться в мелочах, общаться с людьми и понимать их.</p>
7
<p>При создании дизайна веб-страницы приходится учитывать, что её будут смотреть с разных устройств: телефонов, планшетов, ноутбуков, стационарных компьютеров, а может, даже и телевизоров.</p>
7
<p>При создании дизайна веб-страницы приходится учитывать, что её будут смотреть с разных устройств: телефонов, планшетов, ноутбуков, стационарных компьютеров, а может, даже и телевизоров.</p>
8
<p>Чтобы форматировать контент сайта под разные экраны, в CSS используют медиазапросы. Благодаря этим запросам в большинстве случаев даже не нужно глубоко погружаться в <a>HTML</a>-код.</p>
8
<p>Чтобы форматировать контент сайта под разные экраны, в CSS используют медиазапросы. Благодаря этим запросам в большинстве случаев даже не нужно глубоко погружаться в <a>HTML</a>-код.</p>
9
<p><strong>Содержание</strong></p>
9
<p><strong>Содержание</strong></p>
10
<ul><li><a>Что такое медиазапросы</a></li>
10
<ul><li><a>Что такое медиазапросы</a></li>
11
<li><a>Синтаксис</a></li>
11
<li><a>Синтаксис</a></li>
12
</ul><ul><li><a>@media</a></li>
12
</ul><ul><li><a>@media</a></li>
13
<li><a>@import</a></li>
13
<li><a>@import</a></li>
14
<li><a>Теги HTML</a></li>
14
<li><a>Теги HTML</a></li>
15
<li><a>Метатег viewport</a></li>
15
<li><a>Метатег viewport</a></li>
16
</ul><ul><li><a>Поддержка браузерами</a></li>
16
</ul><ul><li><a>Поддержка браузерами</a></li>
17
<li><a>Какие условия можно задать в медиазапросе</a></li>
17
<li><a>Какие условия можно задать в медиазапросе</a></li>
18
</ul><ul><li><a>Типы устройств</a></li>
18
</ul><ul><li><a>Типы устройств</a></li>
19
<li><a>Медиафункции (характеристики)</a></li>
19
<li><a>Медиафункции (характеристики)</a></li>
20
</ul><ul><li><a>Логические операторы</a></li>
20
</ul><ul><li><a>Логические операторы</a></li>
21
</ul><ul><li><a>and</a></li>
21
</ul><ul><li><a>and</a></li>
22
<li><a>or и ,</a></li>
22
<li><a>or и ,</a></li>
23
<li><a>not</a></li>
23
<li><a>not</a></li>
24
<li><a>only</a></li>
24
<li><a>only</a></li>
25
<li><a>Группирующие скобки</a></li>
25
<li><a>Группирующие скобки</a></li>
26
</ul><ul><li><a>Резюмируем</a></li>
26
</ul><ul><li><a>Резюмируем</a></li>
27
</ul><p><strong>CSS-медиазапросы (media queries)</strong> - это набор правил (запросов), которые позволяют адаптировать внешний вид веб-страницы под технические параметры устройства пользователя: ширину и высоту экрана, плотность пикселей, количество поддерживаемых цветов и так далее.</p>
27
</ul><p><strong>CSS-медиазапросы (media queries)</strong> - это набор правил (запросов), которые позволяют адаптировать внешний вид веб-страницы под технические параметры устройства пользователя: ширину и высоту экрана, плотность пикселей, количество поддерживаемых цветов и так далее.</p>
28
<p><strong>Любой медиазапрос - это условие</strong>, которое задаётся тому или иному стилю. Если условие выполняется, то стиль применяется, если нет - не применяется. Таким образом, при помощи запросов можно прописать сразу несколько стилей со своими условиями под разные ситуации. Например, для разной ширины экрана пользователя: до 320 px, от 320 px до 720 px, от 720 px до 1024 px и от 1024 px.</p>
28
<p><strong>Любой медиазапрос - это условие</strong>, которое задаётся тому или иному стилю. Если условие выполняется, то стиль применяется, если нет - не применяется. Таким образом, при помощи запросов можно прописать сразу несколько стилей со своими условиями под разные ситуации. Например, для разной ширины экрана пользователя: до 320 px, от 320 px до 720 px, от 720 px до 1024 px и от 1024 px.</p>
29
<p>В отличие от других инструментов адаптивной вёрстки, например CSS Grid, медиазапросы довольно просты в изучении. Зная базовый синтаксис CSS, их можно освоить за полчаса. При этом медиазапросы можно комбинировать с тем же Grid, чтобы задавать более сложную логику отображения.</p>
29
<p>В отличие от других инструментов адаптивной вёрстки, например CSS Grid, медиазапросы довольно просты в изучении. Зная базовый синтаксис CSS, их можно освоить за полчаса. При этом медиазапросы можно комбинировать с тем же Grid, чтобы задавать более сложную логику отображения.</p>
30
<p>На сайте Skillbox Media тоже используются медиазапросы. Посмотрите, например, как меняется дизайн при увеличении масштаба страницы.</p>
30
<p>На сайте Skillbox Media тоже используются медиазапросы. Посмотрите, например, как меняется дизайн при увеличении масштаба страницы.</p>
31
<em>Скриншоты: Skillbox Media</em><em>Скриншоты: Skillbox Media</em><p>Можно заметить, что при масштабировании уменьшаются пустые пространства между элементами, боковое меню убирается под кнопку с выпадающим списком, а потом и вовсе пропадает. Всё это можно реализовать с помощью медиазапросов.</p>
31
<em>Скриншоты: Skillbox Media</em><em>Скриншоты: Skillbox Media</em><p>Можно заметить, что при масштабировании уменьшаются пустые пространства между элементами, боковое меню убирается под кнопку с выпадающим списком, а потом и вовсе пропадает. Всё это можно реализовать с помощью медиазапросов.</p>
32
<p>Медиазапросы можно применять:</p>
32
<p>Медиазапросы можно применять:</p>
33
<ul><li>в правилах CSS @media и @import;</li>
33
<ul><li>в правилах CSS @media и @import;</li>
34
<li>в тегах HTML <style>, <link>, <source> и других, имеющих атрибут media.</li>
34
<li>в тегах HTML <style>, <link>, <source> и других, имеющих атрибут media.</li>
35
</ul><p>Ниже рассказываем о каждом из способов использования запросов.</p>
35
</ul><p>Ниже рассказываем о каждом из способов использования запросов.</p>
36
<p>Ключевое слово @media - основной инструмент для работы медиазапросами. По сути, это обёртка для стиля: всё, что находится внутри, применяется или не применяется в зависимости от того, выполняется ли условие.</p>
36
<p>Ключевое слово @media - основной инструмент для работы медиазапросами. По сути, это обёртка для стиля: всё, что находится внутри, применяется или не применяется в зависимости от того, выполняется ли условие.</p>
37
<p>Вот как выглядит запрос @media в общем виде:</p>
37
<p>Вот как выглядит запрос @media в общем виде:</p>
38
@media <условие> { <стиль> }<p>А вот пример - запрос, который запускает разные стили, когда пользователь поворачивает экран.</p>
38
@media <условие> { <стиль> }<p>А вот пример - запрос, который запускает разные стили, когда пользователь поворачивает экран.</p>
39
@media (orientation: landscape) { /*Стиль применится при горизонтальной ориентации устройства*/ } @media (orientation: portrait) { /*Стиль применится при портретной ориентации устройства*/ }<p>Как и другие правила CSS, @media можно вкладывать внутрь других правил. Например:</p>
39
@media (orientation: landscape) { /*Стиль применится при горизонтальной ориентации устройства*/ } @media (orientation: portrait) { /*Стиль применится при портретной ориентации устройства*/ }<p>Как и другие правила CSS, @media можно вкладывать внутрь других правил. Например:</p>
40
div { height: 11rem; background-color: blue; @media (max-width: 480px) { width: 95% }; @media (min-width: 480px) { width: 55% } }<p>Ключевое слово @import позволяет включить в файл с разметкой стили из других CSS-файлов. Фишка в том, что внутри этого правила можно прописать условия, при которых стили будут работать, - например, при изменении ориентации экрана.</p>
40
div { height: 11rem; background-color: blue; @media (max-width: 480px) { width: 95% }; @media (min-width: 480px) { width: 55% } }<p>Ключевое слово @import позволяет включить в файл с разметкой стили из других CSS-файлов. Фишка в том, что внутри этого правила можно прописать условия, при которых стили будут работать, - например, при изменении ориентации экрана.</p>
41
<p>Вот как выглядит синтаксис запроса @import в общем виде:</p>
41
<p>Вот как выглядит синтаксис запроса @import в общем виде:</p>
42
@import url(<ссылка на CSS-файл>) <условие>;<p>При желании можно пойти и другим путём: прописать в отдельных CSS-файлах полный набор правил для каждого условия и просто подключить их с помощью конструкции @import. Тут, как говорится, на ваше усмотрение.</p>
42
@import url(<ссылка на CSS-файл>) <условие>;<p>При желании можно пойти и другим путём: прописать в отдельных CSS-файлах полный набор правил для каждого условия и просто подключить их с помощью конструкции @import. Тут, как говорится, на ваше усмотрение.</p>
43
<p><strong>Минус</strong><strong>@import</strong><strong> - низкая производительность.</strong>Дело в том, что это правило блокирует рендеринг сайта: он просто не может отобразиться, пока браузер не загрузит все импорты. Поэтому веб-разработчики<a>рекомендуют</a>избегать использования этой конструкции.</p>
43
<p><strong>Минус</strong><strong>@import</strong><strong> - низкая производительность.</strong>Дело в том, что это правило блокирует рендеринг сайта: он просто не может отобразиться, пока браузер не загрузит все импорты. Поэтому веб-разработчики<a>рекомендуют</a>избегать использования этой конструкции.</p>
44
<p>Также медиазапросы можно встраивать внутрь тегов HTML. Вы можете прописать несколько<strong>стилей</strong><strong><style></strong>, которые будут применяться в зависимости от результата медиазапроса:</p>
44
<p>Также медиазапросы можно встраивать внутрь тегов HTML. Вы можете прописать несколько<strong>стилей</strong><strong><style></strong>, которые будут применяться в зависимости от результата медиазапроса:</p>
45
<style media="<условие>"><p>Если поставить тег <link> внутри <head>, можно подключить стиль из другого файла CSS, как будто вы используете ключевое слово @import. С той лишь разницей, что <link> работает быстрее, потому что не блокирует рендеринг сайта.</p>
45
<style media="<условие>"><p>Если поставить тег <link> внутри <head>, можно подключить стиль из другого файла CSS, как будто вы используете ключевое слово @import. С той лишь разницей, что <link> работает быстрее, потому что не блокирует рендеринг сайта.</p>
46
<head> <link rel="stylesheet" media="<условие>" href="<ссылка на файл CSS>"> </head><p><strong>Обратите внимание:</strong>браузеры подгружают указанные в параметре href файлы, даже если условие медиазапроса не выполняется. Если таких ссылок поставить очень много, это может замедлять работу сайта.</p>
46
<head> <link rel="stylesheet" media="<условие>" href="<ссылка на файл CSS>"> </head><p><strong>Обратите внимание:</strong>браузеры подгружают указанные в параметре href файлы, даже если условие медиазапроса не выполняется. Если таких ссылок поставить очень много, это может замедлять работу сайта.</p>
47
<p>Если прописать медиазапрос внутри<strong>тега</strong><strong><source></strong>, то можно определять, в каких версиях вёрстки загружать медиафайл, а в каких - нет.</p>
47
<p>Если прописать медиазапрос внутри<strong>тега</strong><strong><source></strong>, то можно определять, в каких версиях вёрстки загружать медиафайл, а в каких - нет.</p>
48
<source media="<условие>" srcset="<ссылка на файл>"><p>Таким образом можно, например, показывать картинки с разным разрешением в зависимости от устройства пользователя:</p>
48
<source media="<условие>" srcset="<ссылка на файл>"><p>Таким образом можно, например, показывать картинки с разным разрешением в зависимости от устройства пользователя:</p>
49
<picture> <source media="(max-width: 360px)" srcset="small-picture.png"> <source media="(min-width: 360px) and (max-width: 720px)" srcset="medium-picture.png"> <source media="(min-width: 720px)" srcset="large-picture.png"> <img> <! Запасное изображение, нужное на случай, если ни одно из медиаусловий не выполнится; можно оставить пустым, но тег ставить обязательно --> </picture><p>Метатег viewport помогает адаптивной вёрстке правильно показываться на разных экранах. Например, у двух смартфонов может быть одинаковый размер экрана, но разное количество пикселей на дюйм. Из-за этого браузер может ошибочно считать, что один смартфон имеет больший экран, чем другой, и применить к нему неподходящие стили - например, показать большие кнопки или шрифт.</p>
49
<picture> <source media="(max-width: 360px)" srcset="small-picture.png"> <source media="(min-width: 360px) and (max-width: 720px)" srcset="medium-picture.png"> <source media="(min-width: 720px)" srcset="large-picture.png"> <img> <! Запасное изображение, нужное на случай, если ни одно из медиаусловий не выполнится; можно оставить пустым, но тег ставить обязательно --> </picture><p>Метатег viewport помогает адаптивной вёрстке правильно показываться на разных экранах. Например, у двух смартфонов может быть одинаковый размер экрана, но разное количество пикселей на дюйм. Из-за этого браузер может ошибочно считать, что один смартфон имеет больший экран, чем другой, и применить к нему неподходящие стили - например, показать большие кнопки или шрифт.</p>
50
<p>Чтобы на экранах с одинаковым размером и разным разрешением отображался один и тот же стиль, придумали метатег viewport. Он приводит всё к единому знаменателю - то есть делает так, чтобы стили ориентировались не на количество пикселей, а на размер экрана. Тогда адаптивная вёрстка будет работать правильно на любом устройстве, и медиазапросы будут выбирать стили в зависимости от размера экрана, а не разрешения.</p>
50
<p>Чтобы на экранах с одинаковым размером и разным разрешением отображался один и тот же стиль, придумали метатег viewport. Он приводит всё к единому знаменателю - то есть делает так, чтобы стили ориентировались не на количество пикселей, а на размер экрана. Тогда адаптивная вёрстка будет работать правильно на любом устройстве, и медиазапросы будут выбирать стили в зависимости от размера экрана, а не разрешения.</p>
51
<p>Метатег viewport ставится прямо в HTML-код страницы, в раздел <header>:</p>
51
<p>Метатег viewport ставится прямо в HTML-код страницы, в раздел <header>:</p>
52
<header> <meta name="viewport" content="width=device-width, initial-scale=1"> </header><p>Сейчас в веб-разработке используют две основные версии медиазапросов:<a>Level 3</a>и <a>Level 4</a>. Оба уровня запросов поддерживаются всеми популярными современными браузерами. Существует ещё<a>Level 5</a>, но он пока находится на стадии разработки.</p>
52
<header> <meta name="viewport" content="width=device-width, initial-scale=1"> </header><p>Сейчас в веб-разработке используют две основные версии медиазапросов:<a>Level 3</a>и <a>Level 4</a>. Оба уровня запросов поддерживаются всеми популярными современными браузерами. Существует ещё<a>Level 5</a>, но он пока находится на стадии разработки.</p>
53
<p>Level 3 поддерживается большим количеством старых браузеров, зато Level 4 добавляет новые медиафункции - например, частоту обновления экрана.</p>
53
<p>Level 3 поддерживается большим количеством старых браузеров, зато Level 4 добавляет новые медиафункции - например, частоту обновления экрана.</p>
54
<p>Разница в поддержке, впрочем, совсем небольшая и находится в пределах погрешности. Согласно данным с сайта<a>Can I use</a>, в июле 2023 года Level 3 поддерживают 98,29% браузеров всех интернет-пользователей, а Level 4 - 96,15%.</p>
54
<p>Разница в поддержке, впрочем, совсем небольшая и находится в пределах погрешности. Согласно данным с сайта<a>Can I use</a>, в июле 2023 года Level 3 поддерживают 98,29% браузеров всех интернет-пользователей, а Level 4 - 96,15%.</p>
55
Поддержка браузерами медиазапросов Level 3<em>Скриншот:</em><a><em>Can I use</em></a><em>/ Skillbox Media</em>Поддержка браузерами функций из медиазапросов Level 4<em>Скриншот:</em><a><em>Can I use</em></a><em>/ Skillbox Media</em><p>Есть два вида условий, которые можно задать в медиазапросах:</p>
55
Поддержка браузерами медиазапросов Level 3<em>Скриншот:</em><a><em>Can I use</em></a><em>/ Skillbox Media</em>Поддержка браузерами функций из медиазапросов Level 4<em>Скриншот:</em><a><em>Can I use</em></a><em>/ Skillbox Media</em><p>Есть два вида условий, которые можно задать в медиазапросах:</p>
56
<ul><li><strong>тип устройства</strong> - отвечает за идейно разные способы потребления контента;</li>
56
<ul><li><strong>тип устройства</strong> - отвечает за идейно разные способы потребления контента;</li>
57
<li><strong>медиафункции</strong> - отвечают за технические характеристики устройства.</li>
57
<li><strong>медиафункции</strong> - отвечают за технические характеристики устройства.</li>
58
</ul><p>Медиазапросы делят все устройства, с которых можно открывать сайты, на четыре типа:</p>
58
</ul><p>Медиазапросы делят все устройства, с которых можно открывать сайты, на четыре типа:</p>
59
<ul><li>all - все устройства;</li>
59
<ul><li>all - все устройства;</li>
60
<li>screen - устройства с экранами;</li>
60
<li>screen - устройства с экранами;</li>
61
<li>print - устройства в режиме предварительного просмотра страницы перед печатью;</li>
61
<li>print - устройства в режиме предварительного просмотра страницы перед печатью;</li>
62
<li>speech - программы чтения с экрана.</li>
62
<li>speech - программы чтения с экрана.</li>
63
</ul><p>Синтаксически это оформляется так (на примере устройств с экранами):</p>
63
</ul><p>Синтаксически это оформляется так (на примере устройств с экранами):</p>
64
@media screen { <стиль> }<p>Второй способ задать в медиазапросе условие - указать характеристики устройства или браузера: ширину окна, ориентацию устройства и так далее.</p>
64
@media screen { <стиль> }<p>Второй способ задать в медиазапросе условие - указать характеристики устройства или браузера: ширину окна, ориентацию устройства и так далее.</p>
65
<p>У некоторых характеристик можно задавать минимальные и максимальные значения: для этого к ним добавляются приставки min- и max-.</p>
65
<p>У некоторых характеристик можно задавать минимальные и максимальные значения: для этого к ним добавляются приставки min- и max-.</p>
66
<p>Медиафункции указываются в круглых скобках. Например:</p>
66
<p>Медиафункции указываются в круглых скобках. Например:</p>
67
@media (min-width: 480px) { /*Cтиль будет применяться, если ширина окна браузера больше 480 пикселей*/ }<p>Вот список актуальных медиафункций, которые работают в браузерах с поддержкой и Level 3, и Level 4:</p>
67
@media (min-width: 480px) { /*Cтиль будет применяться, если ширина окна браузера больше 480 пикселей*/ }<p>Вот список актуальных медиафункций, которые работают в браузерах с поддержкой и Level 3, и Level 4:</p>
68
ХарактеристикаОписаниеПримерыwidthШирина окна браузера. Можно использовать min и maxwidth: 720pxmin-width: 35remmax-width: 1024pxheightВысота окна браузера. Можно использовать min и maxheight: 360pxmin-height: 120pxmax-height: 45remaspect-ratioСоотношение между шириной и высотой браузера. Можно использовать min и maxaspect-ratio: 2/1min-aspect-ratio: 8/5max-aspect-ratio: 3/2orientationОриентация устройстваorientation: landscapeorientation: portraitdisplay-modeРежим отображения веб-приложенияdisplay-mode: fullscreendisplay-mode: standalonedisplay-mode: minimal-uidisplay-mode: browsergridПроверка, является ли экран сеточнымgrid: 0grid: 1resolutionПлотность пикселей на экране. Можно использовать min и maxresolution: 60dpcmmin-resolution: 75dpimax-resolution: 300dpicolorКоличество битов на цвет на цветном экране. Можно использовать min и maxcolor (примет любое цветное устройство).color: 0 (примет любое не цветное устройство).min-color: 8max-color: 16monochromeКоличество бит на цвет на монохромном экране. Можно использовать min и maxmonochrome (примет любое монохромное устройство).monochrome: 0 (примет любое не монохромное устройство).min-monochrome: 8max-monochrome: 16color-indexКоличество цветов, которые может отображать устройство. Можно использовать min и maxcolor-index: 2000min-color-index: 256max-color-index: 16000dynamic-rangeСочетание уровня яркости, контрастности и глубины цвета на устройствеdynamic-range: standarddynamic-range: high<p>А вот список медиафункций, добавленных в Level 4:</p>
68
ХарактеристикаОписаниеПримерыwidthШирина окна браузера. Можно использовать min и maxwidth: 720pxmin-width: 35remmax-width: 1024pxheightВысота окна браузера. Можно использовать min и maxheight: 360pxmin-height: 120pxmax-height: 45remaspect-ratioСоотношение между шириной и высотой браузера. Можно использовать min и maxaspect-ratio: 2/1min-aspect-ratio: 8/5max-aspect-ratio: 3/2orientationОриентация устройстваorientation: landscapeorientation: portraitdisplay-modeРежим отображения веб-приложенияdisplay-mode: fullscreendisplay-mode: standalonedisplay-mode: minimal-uidisplay-mode: browsergridПроверка, является ли экран сеточнымgrid: 0grid: 1resolutionПлотность пикселей на экране. Можно использовать min и maxresolution: 60dpcmmin-resolution: 75dpimax-resolution: 300dpicolorКоличество битов на цвет на цветном экране. Можно использовать min и maxcolor (примет любое цветное устройство).color: 0 (примет любое не цветное устройство).min-color: 8max-color: 16monochromeКоличество бит на цвет на монохромном экране. Можно использовать min и maxmonochrome (примет любое монохромное устройство).monochrome: 0 (примет любое не монохромное устройство).min-monochrome: 8max-monochrome: 16color-indexКоличество цветов, которые может отображать устройство. Можно использовать min и maxcolor-index: 2000min-color-index: 256max-color-index: 16000dynamic-rangeСочетание уровня яркости, контрастности и глубины цвета на устройствеdynamic-range: standarddynamic-range: high<p>А вот список медиафункций, добавленных в Level 4:</p>
69
ХарактеристикаОписаниеПримерыupdateЧастота обновления экранаupdate: noneupdate: slowupdate: fastoverflow-blockКак устройство обрабатывает содержимое, переполненное по оси блокаoverflow-block: noneoverflow-block: scrolloverflow-block: optional-pagedoverflow-block: pagedoverflow-inlineКак устройство обрабатывает содержимое, переполненное по встроенной осиoverflow-block: noneoverflow-block: scrollany-hoverПроверка, позволяет ли любое из устройств ввода наводить курсор на объектыany-hover: noneany-hover: hoverpointerПроверка, есть ли указывающее устройство ввода. Если да, то насколько точно основное устройствоpointer: nonepointer: coarsepointer: fineany-pointerПроверка, есть ли указывающее устройство ввода. Если да, то насколько точно любое из устройствpointer: nonepointer: coarsepointer: fine<p>Иногда применение того или иного стиля может зависеть от нескольких условий. Скажем, вы хотите одновременно установить минимальную и максимальную ширину экрана.</p>
69
ХарактеристикаОписаниеПримерыupdateЧастота обновления экранаupdate: noneupdate: slowupdate: fastoverflow-blockКак устройство обрабатывает содержимое, переполненное по оси блокаoverflow-block: noneoverflow-block: scrolloverflow-block: optional-pagedoverflow-block: pagedoverflow-inlineКак устройство обрабатывает содержимое, переполненное по встроенной осиoverflow-block: noneoverflow-block: scrollany-hoverПроверка, позволяет ли любое из устройств ввода наводить курсор на объектыany-hover: noneany-hover: hoverpointerПроверка, есть ли указывающее устройство ввода. Если да, то насколько точно основное устройствоpointer: nonepointer: coarsepointer: fineany-pointerПроверка, есть ли указывающее устройство ввода. Если да, то насколько точно любое из устройствpointer: nonepointer: coarsepointer: fine<p>Иногда применение того или иного стиля может зависеть от нескольких условий. Скажем, вы хотите одновременно установить минимальную и максимальную ширину экрана.</p>
70
<p>В таких случаях каждое условие запроса пишут в отдельных скобках, а между ними ставят<strong>логические операторы</strong>. Выглядит это так:</p>
70
<p>В таких случаях каждое условие запроса пишут в отдельных скобках, а между ними ставят<strong>логические операторы</strong>. Выглядит это так:</p>
71
@media <условие> <оператор> <условие> { <стиль> }<p>Давайте пройдёмся по этим операторам и выясним, как их применять.</p>
71
@media <условие> <оператор> <условие> { <стиль> }<p>Давайте пройдёмся по этим операторам и выясним, как их применять.</p>
72
<p><strong>Оператор</strong><strong>and</strong>используется как логическое<strong>И</strong>. Запрос выполняется только в том случае, если истинно каждое из условий. Так, в примере ниже стиль применится, если ширина окна браузера больше 480 px <strong>И</strong>меньше 1024 px - то есть, где-то между этими значениями.</p>
72
<p><strong>Оператор</strong><strong>and</strong>используется как логическое<strong>И</strong>. Запрос выполняется только в том случае, если истинно каждое из условий. Так, в примере ниже стиль применится, если ширина окна браузера больше 480 px <strong>И</strong>меньше 1024 px - то есть, где-то между этими значениями.</p>
73
@media (min-width: 480px) and (max-width: 1024px) { }<p><strong>Оператор</strong><strong>or</strong>используется как логическое <strong>ИЛИ</strong>. Результат медиазапроса истинен, если истинно хотя бы одно из условий. В следующем примере стиль применится, если в запросе есть указывающее устройство ввода, неточное<strong>ИЛИ</strong>точное.</p>
73
@media (min-width: 480px) and (max-width: 1024px) { }<p><strong>Оператор</strong><strong>or</strong>используется как логическое <strong>ИЛИ</strong>. Результат медиазапроса истинен, если истинно хотя бы одно из условий. В следующем примере стиль применится, если в запросе есть указывающее устройство ввода, неточное<strong>ИЛИ</strong>точное.</p>
74
@media (pointer: coarse) or (pointer: fine) { }<p>В медиазапросах уровня 4 вместо оператора or можно использовать<strong>запятую</strong>:</p>
74
@media (pointer: coarse) or (pointer: fine) { }<p>В медиазапросах уровня 4 вместо оператора or можно использовать<strong>запятую</strong>:</p>
75
@media (pointer: coarse), (pointer: fine) { /*Стиль применится, если есть указывающее устройство ввода, неточное или точное*/ }<p><strong>Оператор</strong><strong>not</strong>используется как логическое<strong>НЕ</strong>. Например:</p>
75
@media (pointer: coarse), (pointer: fine) { /*Стиль применится, если есть указывающее устройство ввода, неточное или точное*/ }<p><strong>Оператор</strong><strong>not</strong>используется как логическое<strong>НЕ</strong>. Например:</p>
76
@media not screen { /*Стиль применится, если у устройства нет экрана*/ }<p><strong>Оператор</strong><strong>only</strong>нужен, чтобы обезопасить себя от некорректной работы некоторых старых браузеров, читающих синтаксис CSS2 вместо CSS3.</p>
76
@media not screen { /*Стиль применится, если у устройства нет экрана*/ }<p><strong>Оператор</strong><strong>only</strong>нужен, чтобы обезопасить себя от некорректной работы некоторых старых браузеров, читающих синтаксис CSS2 вместо CSS3.</p>
77
<p>Допустим, у нас есть такой запрос:</p>
77
<p>Допустим, у нас есть такой запрос:</p>
78
@media screen and (min-width: 480px) { <стиль> }<p>Устаревший браузер сможет прочитать его только до первого пробела, следующего после @media screen. Соответственно, стиль он отобразит на всех устройствах с экранами, а не только на тех, у которых ширина окна больше 480 px, как нам нужно.</p>
78
@media screen and (min-width: 480px) { <стиль> }<p>Устаревший браузер сможет прочитать его только до первого пробела, следующего после @media screen. Соответственно, стиль он отобразит на всех устройствах с экранами, а не только на тех, у которых ширина окна больше 480 px, как нам нужно.</p>
79
<p>Если добавить оператор only, браузер дочитает только до него: @media only - и не применит стиль вовсе.</p>
79
<p>Если добавить оператор only, браузер дочитает только до него: @media only - и не применит стиль вовсе.</p>
80
<p>Используя оператор only, вы должны указывать тип устройства. Например:</p>
80
<p>Используя оператор only, вы должны указывать тип устройства. Например:</p>
81
@media only screen and (orientation: portrait) { /*Стиль не применится, если браузер не поддерживает синтаксис CSS3*/ }<p>Чтобы контролировать, в какой последовательности будут применяться логические операторы, можно использовать в запросах<strong>группирующие скобки</strong>:</p>
81
@media only screen and (orientation: portrait) { /*Стиль не применится, если браузер не поддерживает синтаксис CSS3*/ }<p>Чтобы контролировать, в какой последовательности будут применяться логические операторы, можно использовать в запросах<strong>группирующие скобки</strong>:</p>
82
@media screen and (((min-width: 480 px) and (max-width: 1920 px)) or (orientation: landscape)) { /*Стиль применится, если у устройства есть экран, который при этом либо имеет ширину окна браузера от 480 px до 1920 px, либо ориентирован горизонтально*/ }<ul><li>Медиазапросы - это инструмент<strong>адаптивной вёрстки</strong>, который можно использовать как в CSS, так и в HTML-коде.</li>
82
@media screen and (((min-width: 480 px) and (max-width: 1920 px)) or (orientation: landscape)) { /*Стиль применится, если у устройства есть экран, который при этом либо имеет ширину окна браузера от 480 px до 1920 px, либо ориентирован горизонтально*/ }<ul><li>Медиазапросы - это инструмент<strong>адаптивной вёрстки</strong>, который можно использовать как в CSS, так и в HTML-коде.</li>
83
<li>Медиазапросы позволяют запрашивать у пользователя<strong>тип и характеристики устройства</strong>. Если полученные данные соответствуют ожидаемым, то применяется оформление.</li>
83
<li>Медиазапросы позволяют запрашивать у пользователя<strong>тип и характеристики устройства</strong>. Если полученные данные соответствуют ожидаемым, то применяется оформление.</li>
84
<li>Если для одного стиля должно выполняться сразу несколько условий, их можно объединять с помощью<strong>логических операторов</strong>: or, запятая, and, not и only.</li>
84
<li>Если для одного стиля должно выполняться сразу несколько условий, их можно объединять с помощью<strong>логических операторов</strong>: or, запятая, and, not и only.</li>
85
</ul><a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>
85
</ul><a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>