SovaWiki

Инструменты пользователя

Инструменты сайта

Вы посетили: • jquery
css:media_queries

Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
css:media_queries [2026/06/14 05:59] – [Медиа-характеристики] so_v_acss:media_queries [2026/08/06 09:07] (текущий) – so_v_a
Строка 1: Строка 1:
 +<!DOCTYPE markdown>
 +
 # Медиа-запросы # Медиа-запросы
  
Строка 18: Строка 20:
 } }
 </code> </code>
-здесь:\\+здесь:
   * **тип устройства** (опционально) – определяет, для каких устройств применяются стили (например, screen или print). Если тип не указан, запрос будет применяться ко всем устройствам.   * **тип устройства** (опционально) – определяет, для каких устройств применяются стили (например, screen или print). Если тип не указан, запрос будет применяться ко всем устройствам.
   * **характеристика** — указывает параметры устройства, такие как min-width, orientation и так далее.   * **характеристика** — указывает параметры устройства, такие как min-width, orientation и так далее.
   * **and** - логический оператор, применяемый для комбинирования нескольких условий, так же применяются операторы **not** и запятая (**,**), которая действует как логическое «или».   * **and** - логический оператор, применяемый для комбинирования нескольких условий, так же применяются операторы **not** и запятая (**,**), которая действует как логическое «или».
  
-Пример:\\+Пример:
 <code css> <code css>
 @media (min-width: 768px) and (max-width: 1440px) @media (min-width: 768px) and (max-width: 1440px)
Строка 88: Строка 90:
 @media print and (min-resolution: 300dpi) { ... } /* Для печати с плотностью более 300 dpi */ @media print and (min-resolution: 300dpi) { ... } /* Для печати с плотностью более 300 dpi */
 </code> </code>
- 
- 
 ## Логические операторы.  ## Логические операторы. 
  
Строка 114: Строка 114:
 **not** - oператор not используется для отрицания условий. Он позволяет //исключить определённые стили//, если они не соответствуют заданным параметрам. **not** - oператор not используется для отрицания условий. Он позволяет //исключить определённые стили//, если они не соответствуют заданным параметрам.
  
-Когда используется not с and, отрицание применяется ко всему медиа-запросу. В таком случае обязательно указывать тип устройства. +  * Когда используется not с and, отрицание применяется ко всему медиа-запросу. В таком случае обязательно указывать тип устройства. 
-При использовании not в выражении с запятой, отрицание применяется только к отдельному условию.+  * При использовании not в выражении с запятой, отрицание применяется только к отдельному условию.
  
 Пример с and. Стили будут применяться, если не выполняются все три условия (не экран, не ширина ≥ 411px и не высота ≥ 731px): Пример с and. Стили будут применяться, если не выполняются все три условия (не экран, не ширина ≥ 411px и не высота ≥ 731px):
Строка 139: Строка 139:
 } }
 </code> </code>
 +.
 +
  
 ### Вложенные скобки. ### Вложенные скобки.
Строка 154: Строка 156:
 } }
 </code> </code>
 +
 +В этом примере, основное условие – это **screen** и условия, заключенные во вложенные скобки.\\ Стили будут применяться только на устройствах с экранами **(screen)**, и если выполняются условия во вложенных скобках. Внутри этих скобок объединены два условия с помощью оператора **or**:
 +  * (min-width: 600px) and (max-width: 1024px) – стили применяются, если ширина экрана находится в диапазоне от 600px до 1024px;
 +  * (max-width: 480px) – стили применяются, если ширина экрана меньше или равна 480px.
 +
 +Этот медиа-запрос активируется, если выполняются следующие условия:
 +  * Устройство – экран (screen);
 +  * Ширина экрана находится в диапазоне от 600px до 1024px, или меньше или равна 480px.
  
/var/www/html/dokuwiki/data/attic/css/media_queries.1781416774.txt.gz · Последнее изменение: — so_v_a