From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/media_queries/index.html | 131 +++++++++++++++++++++ .../media_queries/using_media_queries/index.html | 120 +++++++++++++++++++ .../index.html" | 83 +++++++++++++ 3 files changed, 334 insertions(+) create mode 100644 files/ru/web/css/media_queries/index.html create mode 100644 files/ru/web/css/media_queries/using_media_queries/index.html create mode 100644 "files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" (limited to 'files/ru/web/css/media_queries') diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html new file mode 100644 index 0000000000..b0300f3174 --- /dev/null +++ b/files/ru/web/css/media_queries/index.html @@ -0,0 +1,131 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS3 Media Queries + - Media Queries + - NeedsTranslation + - Overview + - Reference + - Responsive Design + - TopicStub +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef("CSS3 Media Queries")}}
+ +

Media Queries - ключевой компонент отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных парметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

+ +

Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.

+ +

In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

+ +

You can learn more about programmatically using media queries in Testing media queries.

+ +

Reference

+ +

At-rules

+ +
+ +
+ +

Guides

+ +
+
Using media queries
+
Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.
+
Testing media queries
+
Describes how to test media queries from your JavaScript code, programmatically, to determine the state of the device, and to set up listeners that let your code be notified when the results of media queries change (such as when the user rotates the screen, causing an orientation change).
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.7)}}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1.7)}}9.09.03.1
+
diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..8c3f484537 --- /dev/null +++ b/files/ru/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,120 @@ +--- +title: Использование медиа-запросов +slug: Web/CSS/Media_Queries/Using_media_queries +tags: + - Веб + - Медиа + - Медиа верстка + - Медиа запросы + - Отзывчивый дизайн + - Продвинутый + - Резиновая вёрстка + - Руководство +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

Медиазапросы используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. 

+ +

Медиа для разных типов устройств

+ +

Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:

+ +
@media print { ... }
+ +

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

+ +
@media screen, print { ... }
+ +

Список устройств вы можете найти перейдя по этой ссылке. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

+ +

Узконаправленные @media

+ +

Media features описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

+ +
@media (hover: hover) { ... }
+ +

Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:

+ +
@media (max-width: 12450px) { ... }
+ +

Если вы создаете медиа-запрос без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:

+ +
@media (color) { ... }
+ +

Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

Дополнительные примеры медиа запросов, смотрите на справочной странице для каждой конкретной функции.

+ +

Создание комплексных медиа запросов

+ +

Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

+ +

В прошлом примере мы видели как применяется оператор and для группировки type и функции. Оператор and так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиазапрос, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.

+ +
+

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

+
+ +

and

+ +

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ...  }
+ +

comma-separated lists

+ +

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait mode:

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

+ +

not

+ +

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

+ +
@media not all and (monochrome) { ... }
+
+ +

... so that the above query is evaluated like this:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... rather than like this:

+ +
@media (not all) and (monochrome) { ... }
+ +

As another example, the following media query:

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

... is evaluated like this:

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

only

+ +

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

+ +
<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
+
+ +

Смотрите также

+ + diff --git "a/files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" "b/files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" new file mode 100644 index 0000000000..878621ebd3 --- /dev/null +++ "b/files/ru/web/css/media_queries/\321\202\320\265\321\201\321\202\320\270\321\200\320\276\320\262\320\260\320\275\320\270\320\265_\320\274\320\265\320\264\320\270\320\260_\320\267\320\260\320\277\321\200\320\276\321\201\321\213/index.html" @@ -0,0 +1,83 @@ +--- +title: Тестирование медиа-запросов программно +slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы +tags: + - Запросы + - медиа-запросы +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +
{{cssref}}
+ +

 {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  медиа-запросов программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат запроса или получать уведомление, при изменении результата.

+ +

Создание списка медиа-запросов

+ +

Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используйется метод {{domxref("window.matchMedia") }}.

+ +

Например, настройка списка запросов, который определяет, находится ли устройство в альбомной или книжной ориентации:

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)");
+
+ +

Проверка результата запроса

+ +

После того, как вы создали свой список медиа-запросов, вы можете проверить результат запроса, посмотрев на значение его свойства matches:

+ +
if (mediaQueryList.matches) {
+  /* Окно просмотра в настоящее время находится в книжной ориентации */
+} else {
+  /* Окно просмотра в настоящее время находится в альбомной ориентации */
+}
+
+ +

Получение уведомлений о запросах

+ +

Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать слушатель, чем вытаскивать результат запросов.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией обратного вызова, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от true к false):

+ +
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка запросов.
+function handleOrientationChange(mql) { ... } // Определение функции обратного вызова для слушателя событий.
+mediaQueryList.addListener(handleOrientationChange); // Добавление функции обратного вызова в качестве слушателя к списку запросов.
+
+handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
+
+ +

Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему слушатель событий. После добавления слушателя, мы, также, непосредственно вызываем слушателя. Это заставляет нашего слушателя выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.

+ +

Функция handleOrientationChange() будет следить за результатом запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:

+ +
function handleOrientationChange(evt) {
+  if (evt.matches) {
+    /* Окно просмотра в настоящее время находится в книжной ориентации */
+  } else {
+    /* Окно просмотра в настоящее время находится в альбомной ориентации */
+  }
+}
+
+ +

Выше, мы определяем параметры как evt — event объект. Это имеет значение, поскольку новые реализации MediaQueryList обрабатывают слушатели событий стандартным способом. Они больше не используют нестандартный механизм  {{domxref("MediaQueryListListener")}} , а используют стандартную настройку слушателя событий, передавая объект event  {{domxref("MediaQueryListEvent")}} как аргумент функции обратного вызова.

+ +

Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путем прямого доступа к нему или доступа к event объекту.

+ +

Уведомление о завершении запроса

+ +

Для прекращения уведомлений об изменении значения вашего медиа-запроса вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:

+ +
mediaQueryList.removeListener(handleOrientationChange);
+
+ +

Поддержка браузеров

+ +

MediaQueryList interface

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf