Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Одним из самых важных инструментов при создании адаптивной вёрстки является использование медиа-запросов. Медиа-запросы - специальные условные конструкции, которые позволяют применять стили только для определённых устройств.

2 Медиа-запросы записываются следующим образом:

3 В качествеусловиямогут выступать различные значения и константы. Зачастую используются следующие конструкции:

4 <h2>Ориентация экрана</h2>

5 Для определения ориентации экрана используется ключ orientation, значением которого может выступать одно из двух значений:

6 <ol><li>landscape. Условие выполнится для устройств сгоризонтальнойориентацией экрана. Горизонтальная - ориентация, при которой ширинаviewportбольше его высоты.</li>

7 <li>portrait. Условие выполнится для устройств свертикальнойориентацией экрана. Вертикальная - ориентация, при которой высотаviewportбольше его ширины.</li>

8 </ol><h2>Разрешение экрана</h2>

9 При использовании медиа-запросов мы также можем исходить из ширины или высотыviewport. Для этого используются знакомые нам по обычным CSS-правилам условияwidth, min-width, max-widthдля ширины иheight, min-height, max-heightдля высоты.

10 С помощью таких условий создаютсяbreakpoint- контрольные точки. Это границы значений, по которым видоизменяется наш макет. Такие точки остановки позволяют иметь правила для мониторов, планшетов, телефонов, кофеварок.

11 Обратите внимание на порядок написания свойств. Помните, что CSS является каскадной таблицей, поэтому порядок стилей необходимо контролировать. В данном случае к элементу вначале будет применён стиль по умолчанию, который не находится в медиа-запросе, затем поочерёдно будут применяться стили в зависимости от значений в условии медиа-запроса.

12 Например, при ширинеviewport770 пикселей для элемента стили применятся в следующем порядке:

13 <ul><li>Стили по умолчанию.</li>

14 <li>Стили для условия медиа-запроса max-width: 1400px.</li>

15 <li>Стили для условия медиа-запроса max-width: 990px.</li>

16 <li>Стили для условия медиа-запроса max-width: 770px.</li>

17 </ul>Подход, описанный выше называетсяDesktop First. Мы вначале пишем стили для больших мониторов, а в последствии, используя медиа-запросы, дописываем стили для всё более маленьких значенийviewport. Его характерная черта в медиа-запросах - использование конструкцииmax-widthв качестве условия.

18 В противовесDesktop Firstсуществует подходMobile First. Его особенностью является то, что вначале пишутся стили под мобильные устройства, а затем, используя медиа-запросы, пишутся стили для больших размеровviewport. Если вDesktop Firstосновной конструкцией являлось использованиеmax-width, то вMobile Firstиспользуетсяmin-width.

19 Стили, написанные с использованием подходаMobile Firstвыглядят следующим образом:

20 <h2>Логические операторы</h2>

21 Условия внутри медиа-запросов можно комбинировать. Для этого существует три логических оператора:

22 <ul><li>Логическое"И". Означает, что несколько условий должны быть выполнены для того, чтобы CSS-стили применились к элементу. Для использования логического "И" используется ключевое слово and. Сделаем условие, которое проверяет, что экран устройства находится в портретной (вертикальной) ориентации и имеет ширинуviewportне меньше 600 пикселей:</li>

23 </ul><ul><li>Логическое"ИЛИ". Свойства применятся в том случае, если хотя быодно изусловий будет выполнено. Условия для этого отделяются запятыми. Возьмём прошлый пример и применим его с использованием "ИЛИ":</li>

24 </ul><ul><li>Логическое"НЕ". Свойства применятся в том случае, если условиене выполняется. Используется ключевое слово not. Реальное использование этого оператора не велико, в виду сложности и не интуитивности происходящего. В связи с этим советую воздержаться в первое время от использования ключевого слова not.</li>

25 </ul>Медиа-запросы возможно писать не только внутри CSS-файла, но и использовать их в HTML при подключении файла стилей. В этом случае медиа-запрос указывается в атрибуте media.