SovaWiki

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

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

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

Различия

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

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

Предыдущая версия справа и слеваПредыдущая версия
Следующая версия		Предыдущая версия
css:media_queries [2026/06/14 05:31] – [Характеристики] so_v_acss:media_queries [2026/08/06 09:07] (текущий) – so_v_a
Строка 1: Строка 1:
 +<!DOCTYPE markdown>
 +
 # Медиа-запросы # Медиа-запросы
  
Строка 8: Строка 10:
  
 Пример подключения метатега viewport:\\ Пример подключения метатега viewport:\\
-<code>+<code html>
 <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
 </code> </code>
  
 Общий синтаксис медиа-выражения: Общий синтаксис медиа-выражения:
-<code>+<code css>
 @media [тип устройства] and ([характеристика]) { @media [тип устройства] and ([характеристика]) {
     /* CSS-правила */     /* CSS-правила */
 } }
 </code> </code>
-здесь:\\+здесь:
   * **тип устройства** (опционально) – определяет, для каких устройств применяются стили (например, screen или print). Если тип не указан, запрос будет применяться ко всем устройствам.   * **тип устройства** (опционально) – определяет, для каких устройств применяются стили (например, screen или print). Если тип не указан, запрос будет применяться ко всем устройствам.
   * **характеристика** — указывает параметры устройства, такие как min-width, orientation и так далее.   * **характеристика** — указывает параметры устройства, такие как min-width, orientation и так далее.
   * **and** - логический оператор, применяемый для комбинирования нескольких условий, так же применяются операторы **not** и запятая (**,**), которая действует как логическое «или».   * **and** - логический оператор, применяемый для комбинирования нескольких условий, так же применяются операторы **not** и запятая (**,**), которая действует как логическое «или».
  
-Пример:\\ +Пример: 
-<code>+<code css>
 @media (min-width: 768px) and (max-width: 1440px) @media (min-width: 768px) and (max-width: 1440px)
 </code> </code>
  
 +
 +## Типы устройств
 +
 +**Тип устройства** определяет, каким образом веб-страница будет отображаться на разных устройствах.\\
 +Существуют следующие стандартные типы устройств:
 +
 +  * **all** – применяется ко всем устройствам, включая экраны и принтеры. Этот тип часто используется, когда нужно создать универсальные стили.
 +  * **print** – используется для принтеров или в режиме предварительного просмотра перед печатью. Этот тип помогает адаптировать страницу под формат печати, например, скрывать ненужные элементы.
 +  * **screen** – применяется для экранных устройств (например, компьютеры, планшеты, смартфоны). Это наиболее часто используемый тип для отображения на устройствах с экранами.
 +  * **speech** – используется для устройств и программ, предназначенных для чтения с экрана (например, для пользователей с нарушениями зрения).
 +
 +Пример медиа-запроса, который применяется только на устройствах с экранами:
 +<code CSS>
 +@media screen {
 +    /* стили для экранов */
 +}
 +</code>
  
 ## Медиа-характеристики ## Медиа-характеристики
Строка 38: Строка 57:
   * **max-** задаёт максимальное значение характеристики.   * **max-** задаёт максимальное значение характеристики.
  
-Эти префиксы удобны для адаптивного дизайна, когда нужно //ограничить действие стилей в определённых рамках//.+Эти префиксы удобны для адаптивного дизайна, когда нужно //ограничить действие стилей только в нужных диапазонах или при определённых минимальных/максимальных значениях//.
  
-Примеры использования: +**Примеры использования медиа-характеристик**:
- +
-width – ширина области просмотра:+
  
 +**width** – ширина области просмотра:
 <code CSS> <code CSS>
 @media (min-width: 768px) { ... } /* Ширина экрана больше 768px */ @media (min-width: 768px) { ... } /* Ширина экрана больше 768px */
Строка 50: Строка 68:
 </code> </code>
  
-height – высота области просмотра: +**height** – высота области просмотра: 
- +<code CSS>
-CSS +
- +
-Копировать+
 @media (min-height: 720px) { ... } /* Высота экрана больше 720px */ @media (min-height: 720px) { ... } /* Высота экрана больше 720px */
 orientation – ориентация экрана (альбомная или портретная): orientation – ориентация экрана (альбомная или портретная):
 +</code>
  
-CSS +<code CSS>
- +
-Копировать+
 @media (orientation: landscape) { ... } /* Альбомная ориентация */ @media (orientation: landscape) { ... } /* Альбомная ориентация */
 @media (orientation: portrait) { ... } /* Портретная ориентация */ @media (orientation: portrait) { ... } /* Портретная ориентация */
-aspect-ratio – соотношение сторон области просмотра:+</code>
  
-CSS +**aspect-ratio** – соотношение сторон области просмотра: 
- +<code CSS>
-Копировать+
 @media (min-aspect-ratio: 9/16) { ... } /* Минимальное соотношение сторон 9:16 */ @media (min-aspect-ratio: 9/16) { ... } /* Минимальное соотношение сторон 9:16 */
 @media (max-aspect-ratio: 16/9) { ... } /* Максимальное соотношение сторон 16:9 */ @media (max-aspect-ratio: 16/9) { ... } /* Максимальное соотношение сторон 16:9 */
-resolution – плотность пикселей:+</code>
  
-CSS +**resolution** – плотность пикселей: 
- +<code CSS>
-Копировать+
 @media (min-resolution: 150dpi) { ... } /* Минимальная плотность 150 dpi */ @media (min-resolution: 150dpi) { ... } /* Минимальная плотность 150 dpi */
 @media print and (min-resolution: 300dpi) { ... } /* Для печати с плотностью более 300 dpi */ @media print and (min-resolution: 300dpi) { ... } /* Для печати с плотностью более 300 dpi */
-Использование min- и max- помогает настроить адаптивный дизайн, применяя стили только в нужных диапазонах или при определённых минимальных/максимальных значениях.+</code> 
 +## Логические операторы.  
 + 
 +Логические операторы, такие как **and**, "**,**" (запятая), **not** и **only**, используются для создания сложных медиа-запросов, которые позволяют точнее управлять отображением страницы в зависимости от различных условий устройства. 
 + 
 +**and** - Оператор and объединяет несколько условий, и медиа-запрос будет применяться только в том случае, //если все условия истинны//.  
 + 
 +Медиа-запрос, который применяется только тогда, когда выполняются все условия (тип устройства – экран, ширина экрана ≥ 1200px и ориентация – ландшафтная): 
 +<code CSS> 
 +@media screen and (min-width: 1200px) and (orientation: landscape) {  
 +    /* стили */ 
 +} 
 +</code> 
 + 
 +**,** (запятая) - Запятая действует как логический оператор «ИЛИ». //Если хотя бы одно из указанных условий истинно//, то стили будут применяться. Это полезно, когда нужно учитывать несколько вариантов условий. 
 + 
 +Следующий медиа-запрос применяется, если выполняется хотя бы одно из условий: ширина экрана ≥ 544px или ориентация – портретная: 
 +<code CSS> 
 +@media (min-width: 544px), (orientation: portrait) {  
 +    /* стили */ 
 +} 
 +</code> 
 + 
 +**not** - oператор not используется для отрицания условий. Он позволяет //исключить определённые стили//, если они не соответствуют заданным параметрам. 
 + 
 +  * Когда используется not с and, отрицание применяется ко всему медиа-запросу. В таком случае обязательно указывать тип устройства. 
 +  * При использовании not в выражении с запятой, отрицание применяется только к отдельному условию. 
 + 
 +Пример с and. Стили будут применяться, если не выполняются все три условия (не экран, не ширина ≥ 411px и не высота ≥ 731px): 
 +<code CSS> 
 +@media not screen and (min-width: 411px) and (min-height: 731px) {  
 +    /* стили */ 
 +} 
 +</code> 
 + 
 +Пример с запятой. Стили будут применяться, если хотя бы одно из условий ложно (не экран или не ширина ≥ 411px): 
 +<code CSS> 
 +@media not screen, not (min-width: 411px) {  
 +    /* стили */ 
 +} 
 +</code> 
 + 
 +**only** - Оператор only используется //для ограничения применения медиа-запроса к тем браузерам, которые поддерживают указанное условие//. В основном он был нужен для старых браузеров, не поддерживающих CSS3 медиа-запросы. Сейчас большинство современных браузеров поддерживают все необходимые характеристики, и использование only стало избыточным. Однако, если нужно исключить старые браузеры, поддерживающие только старые версии медиа-запросов, его можно использовать. 
 + 
 +Медиа-запрос, который применяется только в браузерах, поддерживающих CSS3: 
 +<code CSS> 
 +@media only screen and (max-width: 600px) {  
 +    /* стили */ 
 +} 
 +</code> 
 +. 
 + 
 + 
 +### Вложенные скобки. 
 + 
 +Вложенные скобки в медиа-запросах позволяют создавать более сложные и точные условия для применения стилей.\\ 
 +Они используются для объединения нескольких логических выражений с операторами, что позволяет гибко настроить условия для различных размеров экрана и характеристик устройства.  
 +<blockquote>Важно помнить, что //внутри скобок для объединения условий с логикой «ИЛИ» следует использовать оператор **or**, а не запятую//.</blockquote> 
 + 
 +Пример использования вложенных скобок: 
 +<code CSS> 
 +@media screen and (((min-width: 600px) and (max-width: 1024px)) or (max-width: 480px)) { 
 +    body { 
 +        background-color: green; 
 +    } 
 +} 
 +</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.1781415061.txt.gz · Последнее изменение: — so_v_a