From 0057f9bf08252974cd89456bd9f4334dc236c40a Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 20 Mar 2021 16:56:28 +0300 Subject: Unify Russian translation for media query word (#224) * Unify Russian translation for media query word * Apply suggestions from code review Co-authored-by: Artem Shibakov --- .../css/css_layout/responsive_design/index.html | 8 ++--- .../first_steps/how_css_is_structured/index.html | 2 +- .../responsive_images/index.html | 2 +- .../feature_detection/index.html | 4 +-- .../managing_screen_orientation/index.html | 6 ++-- files/ru/web/api/window/index.html | 2 +- files/ru/web/api/window/matchmedia/index.html | 4 +-- files/ru/web/css/@media/index.html | 4 +-- files/ru/web/css/at-rule/index.html | 2 +- files/ru/web/css/clamp()/index.html | 2 +- .../css_grid_layout/grid_template_areas/index.html | 6 ++-- .../index.html | 8 ++--- .../media_queries/testing_media_queries/index.html | 34 +++++++++++----------- .../media_queries/using_media_queries/index.html | 18 ++++++------ files/ru/web/css/ratio/index.html | 6 ++-- files/ru/web/css/transform/index.html | 2 +- files/ru/web/guide/mobile/index.html | 6 ++-- files/ru/web/html/element/img/index.html | 2 +- files/ru/web/html/element/link/index.html | 10 +++---- files/ru/web/html/element/picture/index.html | 2 +- files/ru/web/html/element/source/index.html | 4 +-- files/ru/web/html/preloading_content/index.html | 2 +- 22 files changed, 68 insertions(+), 68 deletions(-) (limited to 'files/ru') diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index ba5149fc62..76ee65f70c 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -82,11 +82,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

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

-

Media Queries (Медиа-запросы)

+

Media Queries (Медиавыражения)

-

Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиа запросы позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

+

Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

-

Например, следующий медиа запрос проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

+

Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

@media screen and (min-width: 800px) {
   .container {
@@ -95,7 +95,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 }
-

Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

+

Вы можете добавлять несколько медиавыражений в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html index 51b072fdae..c5bd2d4f2f 100644 --- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -326,7 +326,7 @@ p { 
@import 'styles2.css';
-

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиа-запросы, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

+

Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index bff723e0b6..654c0496b0 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -103,7 +103,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  1. Посмотрит на ширину экрана устройства.
  2. Попытается определить подходящее медиа-условие из списка в атрибуте sizes.
    3. -
  3. Посмотрит на размер слота к этому медиа-запросу.
    4. +
  4. Посмотрит на размер слота к этому медиавыражению.
  5. Загрузит изображение из списка из srcset, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. 
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html index 54632e2233..5f3233d635 100644 --- a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html +++ b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html @@ -85,7 +85,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und

@supports

-

Недавно, в CSS появился собственный механизм обнаружения собственных функций — {{cssxref("@supports")}} at-rule. Это работает аналогично медиазапросам (см. Также Адаптивные проблемы дизайна) — за исключением того, что вместо выборочного применения CSS в зависимости от медиа-функции, такой как разрешение, ширина экрана или соотношение сторон, выборочно применяется CSS в зависимости от того, поддерживается ли функция CSS.

+

Недавно, в CSS появился собственный механизм обнаружения собственных функций — {{cssxref("@supports")}} at-rule. Это работает аналогично медиавыражениям (см. Также Адаптивные проблемы дизайна) — за исключением того, что вместо выборочного применения CSS в зависимости от медиа-функции, такой как разрешение, ширина экрана или соотношение сторон, выборочно применяется CSS в зависимости от того, поддерживается ли функция CSS.

Например, мы могли бы переписать наш предыдущий пример для использования @supports — см. supports-feature-detect.html и supports-styling.css. Если вы посмотрите на последнее, вы увидите пару блоков @supports например:

@@ -169,7 +169,7 @@ if (testElem.style.flex !== undefined && testElem.style.flexFlow !== und

matchMedia

-

Мы также хотели упомянуть функцию JavaScript {{domxref("Window.matchMedia")}} на этом этапе. Это свойство, которое позволяет вам запускать тесты медиа-запросов внутри JavaScript. Это выглядит так:

+

Мы также хотели упомянуть функцию JavaScript {{domxref("Window.matchMedia")}} на этом этапе. Это свойство, которое позволяет вам запускать тесты медиавыражений внутри JavaScript. Это выглядит так:

if (window.matchMedia("(max-width: 480px)").matches) {
   // run JavaScript in here.
diff --git a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html
index 198fae2acb..0068ceaea4 100644
--- a/files/ru/web/api/css_object_model/managing_screen_orientation/index.html
+++ b/files/ru/web/api/css_object_model/managing_screen_orientation/index.html
@@ -15,13 +15,13 @@ original_slug: Web/API/CSS_Object_Model/ориентация_экрана
 сохранения или адаптации интерфейса веб-приложения.

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

+Например, использование медиавыражений позволяет контенту адаптироваться с помощью CSS в зависимости от того, в каком режиме просмотра находится браузер: альбомный (горизонтальный, когда ширина экрана больше высоты) или портретный (вертикальный, высота экрана больше ширины).

 
 
Для определения положения экрана и его блокировки можно воспользоваться JavaScript Screen orientation API.

 
 
Настройка раскладки содержимого по ориентации экрана

 
-
Допустим Вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиа запросов.

+
Допустим Вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиавыражений.

 
 
Пример. Имеется HTML страница:

 
@@ -128,7 +128,7 @@ li {
 
 
 

-
Примечание: Медиа запрос по ориентации ссылается на окно браузера (соотношение его размеров), а не на ориентацию устройства.

+
Примечание: Медиавыражение по ориентации ссылается на окно браузера (соотношение его размеров), а не на ориентацию устройства.

 

 
 
Блокировка ориентации экрана

diff --git a/files/ru/web/api/window/index.html b/files/ru/web/api/window/index.html
index c996dd3af0..5a6b8cae47 100644
--- a/files/ru/web/api/window/index.html
+++ b/files/ru/web/api/window/index.html
@@ -209,7 +209,7 @@ translation_of: Web/API/Window
  
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}

  
Возвращает браузер на домашнюю страницу.

  
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}

- 
Возвращает объект {{domxref("MediaQueryList")}}, представляющий указанную строку медиа-запроса.

+ 
Возвращает объект {{domxref("MediaQueryList")}}, представляющий указанную строку медиавыражения.

  
{{domxref("Window.maximize()")}}

  
{{todo("NeedsContents")}}

  
{{domxref("Window.minimize()")}} (top-level XUL windows only)

diff --git a/files/ru/web/api/window/matchmedia/index.html b/files/ru/web/api/window/matchmedia/index.html
index 21a386eaa8..02d59c30da 100644
--- a/files/ru/web/api/window/matchmedia/index.html
+++ b/files/ru/web/api/window/matchmedia/index.html
@@ -13,7 +13,7 @@ translation_of: Web/API/Window/matchMedia
 
 
mql = window.matchMedia(mediaQueryString)

 
-
где mediaQueryString является строкой медиа запроса, для которой будет возвращён новый объект {{domxref("MediaQueryList")}}.

+
где mediaQueryString является строкой медиавыражения, для которой будет возвращён новый объект {{domxref("MediaQueryList")}}.

 
 
Пример

 
@@ -25,7 +25,7 @@ translation_of: Web/API/Window/matchMedia
 
 
Данный код позволяет обрабатывать поведение по другому, когда размер окна очень узкий.

 
-
Смотрите Использование медиа-запросов из кода для дополнительных примеров.

+
Смотрите Использование медиавыражений из кода для дополнительных примеров.

 
 
Поддержка браузерами

 
diff --git a/files/ru/web/css/@media/index.html b/files/ru/web/css/@media/index.html
index d84acd05ca..10e65064de 100644
--- a/files/ru/web/css/@media/index.html
+++ b/files/ru/web/css/@media/index.html
@@ -7,7 +7,7 @@ translation_of: Web/CSS/@media
 
 
Описание

 
-
At-правило @media в CSS связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких медиазапросов.

+
At-правило @media в CSS связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких медиавыражений.

 
 

 
В JavaScript, at-правило @media может быть получено с помощью {{domxref("CSSMediaRule")}}, интерфейса объектной модели CSS.

@@ -33,7 +33,7 @@ translation_of: Web/CSS/@media
   }
 }
-

Для рассмотрения синтаксиса медиазапросов, см. Использование медиазапросов.

+

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

Формальный синтаксис

diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html index fd71ca762f..38cf88c874 100644 --- a/files/ru/web/css/at-rule/index.html +++ b/files/ru/web/css/at-rule/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/At-rule
  • {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.
  • Вложенные at-правила — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
      -
    • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенному с помощью медиазапроса.
      • +
    • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенного с помощью медиавыражения.
    • {{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
    • {{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
    • {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.
      • diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html index 4411cbf891..e764043f93 100644 --- a/files/ru/web/css/clamp()/index.html +++ b/files/ru/web/css/clamp()/index.html @@ -55,7 +55,7 @@ width: 64px;

      Установка минимального и максимального размера шрифта

      -

      clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиа-запросов.

      +

      clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиавыражений.

      p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
      diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html index 19795f3d19..2b99c113d1 100644 --- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html @@ -221,11 +221,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области

      Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у Вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.

      -

      Переопределение грида с медиа-запросами

      +

      Переопределение грида с медиавыражениями

      Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновременно.

      -

      При этом определяйте имена для ваших грид-областей за пределами медиа-запросов. В таком случае, область основного содержимого (content) всегда будет называться main независимо от того, где она находится на сетке.

      +

      При этом определяйте имена для ваших грид-областей за пределами медиавыражений. В таком случае, область основного содержимого (content) всегда будет называться main независимо от того, где она находится на сетке.

      Мы можем теперь изменить наш макет для узкой ширины экрана на более простой, где все грид-области будут друг над другом в одном столбце.

      @@ -275,7 +275,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области } -

      Внутри медиа-запросов, мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства, на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью grid-template-areas я указываю куда стоит разместить грид-области. 

      +

      Внутри медиавыражений мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства — на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью grid-template-areas я указываю куда стоит разместить грид-области. 

      @media (min-width: 500px) {
     .wrapper {
diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
index 818592a218..c452871664 100644
--- a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html
@@ -59,7 +59,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 </div>
      -

      Поскольку мы используем {{cssxref("grid-template-areas")}} для создания макета, вне каких-либо медиа-запросов, мне нужно назвать области. Мы называем области, используя свойство {{cssxref("grid-area")}}.

      +

      Поскольку мы используем {{cssxref("grid-template-areas")}} для создания макета, вне каких-либо медиавыражений, мне нужно назвать области. Мы называем области, используя свойство {{cssxref("grid-area")}}.

      .main-head {
   grid-area: header;
@@ -81,7 +81,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 }
      -

      Это не создаст никакого макета, однако наши элементы теперь имеют имена, которые мы можем использовать для создания. Оставаясь вне каких-либо медиа-запросов, я теперь собираюсь настроить макет для мобильной платформы. Здесь я держу все в исходном порядке, пытаясь избежать любого разрыва между источником и дисплеем, как описано в руководстве Grid layout and accessibility. У меня нет столбцов или строк, т. к. такой макет предполагает один столбец, и строки будут создаваться по мере необходимости для каждого из элементов неявной сетки.

      +

      Это не создаст никакого макета, однако наши элементы теперь имеют имена, которые мы можем использовать для создания. Оставаясь вне каких-либо медиавыражений, я теперь собираюсь настроить макет для мобильной платформы. Здесь я держу все в исходном порядке, пытаясь избежать любого разрыва между источником и дисплеем, как описано в руководстве Grid layout and accessibility. У меня нет столбцов или строк, т. к. такой макет предполагает один столбец, и строки будут создаваться по мере необходимости для каждого из элементов неявной сетки.

      .wrapper {
   display: grid;
@@ -96,7 +96,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 }
      -

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

      +

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

      @media (min-width: 500px) {
   .wrapper {
@@ -336,7 +336,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 
 
      Создание списка с помощью авторазмещения
      
 
-
      Многие макеты, по сути, представляют собой наборы "карточек" - списки продуктов, галереи изображений и так далее. Сетка может очень легко создавать эти списки таким образом, чтобы они были отзывчивыми, без необходимости добавлять медиа-запросы. В следующем примере я комбинирую CSS Grid и Flexbox макеты, чтобы сделать простой макет списка продуктов.
      
+
      Многие макеты, по сути, представляют собой наборы "карточек" - списки продуктов, галереи изображений и так далее. Сетка может очень легко создавать эти списки таким образом, чтобы они были отзывчивыми, без необходимости добавления медиавыражений. В следующем примере я комбинирую CSS Grid и Flexbox макеты, чтобы сделать простой макет списка продуктов.
      
 
 
      Разметка моего списка-это неупорядоченный список элементов. Каждый элемент содержит заголовок, некоторый текст различной высоты и ссылку с призывом к действию.
      
 
diff --git a/files/ru/web/css/media_queries/testing_media_queries/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html
index 3941df9955..facf42b21c 100644
--- a/files/ru/web/css/media_queries/testing_media_queries/index.html
+++ b/files/ru/web/css/media_queries/testing_media_queries/index.html
@@ -1,28 +1,28 @@
 ---
-title: Тестирование медиа-запросов программно
+title: Тестирование медиавыражений программно
 slug: Web/CSS/Media_Queries/Testing_media_queries
 tags:
-  - Запросы
-  - медиа-запросы
+  - Выражения
+  - медиавыражения
 translation_of: Web/CSS/Media_Queries/Testing_media_queries
 original_slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы
 ---
 
      {{cssref}}
      
 
-
       {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  медиа-запросов программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат запроса или получать уведомление, при изменении результата.
      
+
       {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  медиавыражений программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат выражения или получать уведомление, при изменении результата.
      
 
-
      Создание списка медиа-запросов
      
+
      Создание списка медиавыражений
      
 
-
      Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используется метод {{domxref("window.matchMedia") }}.
      
+
      Прежде, чем вы сможете оценить результаты медиавыражений, вам необходимо создать объект {{domxref("MediaQueryList") }}, отражающий выражение. Для этого используется метод {{domxref("window.matchMedia") }}.
      
 
-
      Например, настройка списка запросов, который определяет, находится ли устройство в альбомной или книжной ориентации:
      
+
      Например, настройка списка выражений, который определяет, находится ли устройство в альбомной или книжной ориентации:
      
 
 
      var mediaQueryList = window.matchMedia("(orientation: portrait)");
 
      
 
-
      Проверка результата запроса
      
+
      Проверка результата выражения
      
 
-
      После того, как вы создали свой список медиа-запросов, вы можете проверить результат запроса, посмотрев на значение его свойства matches:
      
+
      После того, как вы создали свой список медиавыражений, вы можете проверить результат выражения, посмотрев на значение его свойства matches:
      
 
 
      if (mediaQueryList.matches) {
   /* Окно просмотра в настоящее время находится в книжной ориентации */
@@ -31,20 +31,20 @@ original_slug: Web/CSS/Media_Queries/Тестирование_медиа_зап
 }
 
      
 
-
      Получение уведомлений о запросах
      
+
      Получение уведомлений о выражениях
      
 
-
      Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать обработчик, чем вытаскивать результат запросов.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией колбэка, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от true к false):
      
+
      Если вам необходимо постоянно следить за изменениями в результате выражения, эффективнее зарегистрировать обработчик, чем вытаскивать результат выражений.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией колбэка, которая вызывается при изменении статуса медиавыражения (например, тест медиавыражения переходит от true к false):
      
 
-
      var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка запросов.
+
      var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка выражений.
 function handleOrientationChange(mql) { ... } // Определение колбэк-функции для обработчика событий.
-mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку запросов.
+mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку выражений.
 
 handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
 
      
 
-
      Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.
      
+
      Этот код создает список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.
      
 
-
      Функция handleOrientationChange() будет следить за результатом запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:
      
+
      Функция handleOrientationChange() будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:
      
 
 
      function handleOrientationChange(evt) {
   if (evt.matches) {
@@ -59,9 +59,9 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика
 
 
      Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путем прямого доступа к нему или доступа к event объекту.
      
 
-
      Уведомление о завершении запроса
      
+
      Уведомление о завершении выражения
      
 
-
      Для прекращения уведомлений об изменении значения вашего медиа-запроса вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:
      
+
      Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:
      
 
 
      mediaQueryList.removeListener(handleOrientationChange);
 
      
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
index 8c3f484537..9923ab8f1e 100644
--- a/files/ru/web/css/media_queries/using_media_queries/index.html
+++ b/files/ru/web/css/media_queries/using_media_queries/index.html
@@ -1,11 +1,11 @@
 ---
-title: Использование медиа-запросов
+title: Использование медиавыражений
 slug: Web/CSS/Media_Queries/Using_media_queries
 tags:
   - Веб
   - Медиа
   - Медиа верстка
-  - Медиа запросы
+  - Медиавыражения
   - Отзывчивый дизайн
   - Продвинутый
   - Резиновая вёрстка
@@ -14,11 +14,11 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
 ---
 
      {{cssref}}
      
 
-
      Медиазапросы используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. 
      
+
      Медиавыражения используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. 
      
 
 
      Медиа для разных типов устройств
      
 
-
      Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
      
+
      Медиавыражения позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
      
 
 
      @media print { ... }
      
 
@@ -38,7 +38,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
 
 
      @media (max-width: 12450px) { ... }
      
 
-
      Если вы создаете медиа-запрос без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
      
+
      Если вы создаете медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
      
 
 
      @media (color) { ... }
      
 
@@ -46,13 +46,13 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
 
 
      @media speech and (aspect-ratio: 11/5) { ... }
      
 
-
      Дополнительные примеры медиа запросов, смотрите на справочной странице для каждой конкретной функции.
      
+
      Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.
      
 
-
      Создание комплексных медиа запросов
      
+
      Создание комплексных медиавыражений
      
 
-
      Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
      
+
      Иногда вы хотите создать медиавыражение, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
      
 
-
      В прошлом примере мы видели как применяется оператор and для группировки type и функции. Оператор and так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиазапрос, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.
      
+
      В прошлом примере мы видели как применяется оператор 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.
      
diff --git a/files/ru/web/css/ratio/index.html b/files/ru/web/css/ratio/index.html
index e5ca478ac0..aa1e0f260e 100644
--- a/files/ru/web/css/ratio/index.html
+++ b/files/ru/web/css/ratio/index.html
@@ -2,14 +2,14 @@
 title: 
 slug: Web/CSS/ratio
 tags:
-  - медиа-запрос
+  - медиавыражение
   - тип данных
   - формат экрана
 translation_of: Web/CSS/ratio
 ---
 
      {{CSSRef}}
      
 
-
      Тип данных CSS <ratio> используется для описания соотношений сторон в медиа-запросах, обозначает соотношения между двумя безразмерными значениями.
      
+
      Тип данных CSS <ratio> используется для описания соотношений сторон в медиавыражениях, обозначает соотношения между двумя безразмерными значениями.
      
 
 
      Синтаксис
      
 
@@ -17,7 +17,7 @@ translation_of: Web/CSS/ratio
 
 
      Примеры
      
 
-
      Использование в медиа-запросах
      
+
      Использование в медиавыражениях
      
 
 
      @media screen and (min-aspect-ratio: 16/9) { ... }
      
 
diff --git a/files/ru/web/css/transform/index.html b/files/ru/web/css/transform/index.html
index ac2a28f848..54d70a010d 100644
--- a/files/ru/web/css/transform/index.html
+++ b/files/ru/web/css/transform/index.html
@@ -105,7 +105,7 @@ transform: unset;
 
 
      Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определенных типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.
      
 
-
      Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиа-запроса")}}, который отключит анимацию, если пользователь уменьшил анимацию в системных настройках.
      
+
      Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиавыражения")}}, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.
      
 
 
      Узнать больше:
      
 
diff --git a/files/ru/web/guide/mobile/index.html b/files/ru/web/guide/mobile/index.html
index 23d971b083..149b851884 100644
--- a/files/ru/web/guide/mobile/index.html
+++ b/files/ru/web/guide/mobile/index.html
@@ -20,7 +20,7 @@ translation_of: Web/Guide/Mobile
 
 
        
  
      • обтекаемая разметка CSS, позволяющая плавно адаптировать страницу под изменяющиеся размеры окна
        • 
- 
      • использование медиа-запросов, подключающих стили по условию, соответственно, ширине и высоте экрана.
        • 
+ 
      • использование медиавыражений, подключающих стили по условию, соответственно, ширине и высоте экрана.
        • 
 
      
 
 
      Meta-тег viewport указывает браузеру, каким образом отображать ваш сайт в подходящем масштабе на устройстве пользователя.
      
@@ -29,11 +29,11 @@ translation_of: Web/Guide/Mobile
 
 
      Для использования сенсорного экрана вам понадобится работать с DOM Touch events. Вы не сможете использовать псевдо класс CSS :hover, а при проектировании интерактивных элементов (к примеру, кнопок) нужно будет учитывать тот факт, что пальцы толще, чем указатели мыши. Дополнительные материалы в статье проектирование под сенсорные экраны.
      
 
-
      Вы можете использовать медиа-запрос -moz-touch-enabled, чтобы использовать нужные вам правила CSS на устройствах, поддерживающих обработку нажатий на экран.
      
+
      Вы можете использовать медиавыражение -moz-touch-enabled, чтобы использовать нужные вам правила CSS на устройствах, поддерживающих обработку нажатий на экран.
      
 
 
      Оптимизация изображений
      
 
-
      Чтобы помочь пользователям, чьи устройства имеют медленный или дорогой доступ к сети, вы можете оптимизировать изображения, загружая изображения под соответствующие размеры и разрешение экрана устройства. Это делается в CSS указывая в медиа-запросах height, width, и pixel ratio.
      
+
      Для оптимизации скорости загрузки у пользователей мобильных устройств вы имеете возможность загружать различные версии изображений в соответствии со спецификациями экрана устройства. Описать правила загрузки можно в CSS при помощи медиавыражений height, width, и pixel ratio.
      
 
 
      Также вы можете использовать свойства CSS чтобы применить визуальные эффекты типа gradients и shadows без использования изображений.
      
 
diff --git a/files/ru/web/html/element/img/index.html b/files/ru/web/html/element/img/index.html
index 7f9820ad69..86e976ef18 100644
--- a/files/ru/web/html/element/img/index.html
+++ b/files/ru/web/html/element/img/index.html
@@ -289,7 +289,7 @@ translation_of: Web/HTML/Element/img
 
 
      Использование атрибутов srcset и sizes
      
 
-
      Атрибут src игнорируется в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают srcset, когда добавлены дескрипторы 'w'. Когда условие медиа-запроса (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиа-запросе), иначе будет загружено другое изображение.
      
+
      Атрибут src игнорируется в {{glossary("user agent", "пользовательских агентах")}}, которые поддерживают srcset, когда добавлены дескрипторы 'w'. Когда условие медиавыражения (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.
      
 
 
       <img src="clock-demo-thumb-200.png"
       alt="Часы"
diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html
index 9c1a838dcf..3c04f6a861 100644
--- a/files/ru/web/html/element/link/index.html
+++ b/files/ru/web/html/element/link/index.html
@@ -92,13 +92,13 @@ original_slug: Web/HTML/Element/ссылка
  
      {{HTMLAttrDef("integrity")}} {{Experimental_Inline}}
      
  
      Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity.
      
  
      {{HTMLAttrDef("media")}}
      
- 
      Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиа-запросом. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.
+ 
      Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.
  
      
  
      Примечания:
      
 
  
        
-  
      • В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиа-запросы, которые являются расширенным набором допустимых значений HTML 4.
        • 
-  
      • Браузеры, не поддерживающие CSS3 Media Queries, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиа-запросов, определенным в HTML 4.
        • 
+  
      • В HTML 4, это может быть только простой, разделенный пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
        • 
+  
      • Браузеры, не поддерживающие CSS3 Media Queries, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определенным в HTML 4.
        • 
  
      
  
      
  
      
@@ -209,7 +209,7 @@ original_slug: Web/HTML/Element/ссылка
 <!-- basic favicon -->
 <link rel="icon" href="favicon32.png">
      
 
-
      Условная загрузка ресурсов с медиазапросами
      
+
      Условная загрузка ресурсов с медиавыражениями
      
 
 
      Вы можете предоставить тип медиа или запрос внутри атрибута media; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:
      
 
@@ -308,7 +308,7 @@ myStylesheet.onerror = function() {
   
    {{SpecName("HTML5 W3C", "document-metadata.html#the-link-elemen", "<link>")}}
    {{Spec2("HTML5 W3C")}}
-   Добавлены атрибуты crossorigin и sizes; расширены значения media для любых медиазапросов; добавлены многочисленные новые значения для rel.
+   Добавлены атрибуты crossorigin и sizes; расширены значения media для любых медиавыражений; добавлены многочисленные новые значения для rel.
   
   
    {{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}
diff --git a/files/ru/web/html/element/picture/index.html b/files/ru/web/html/element/picture/index.html
index 73934da9de..6072aebba8 100644
--- a/files/ru/web/html/element/picture/index.html
+++ b/files/ru/web/html/element/picture/index.html
@@ -55,7 +55,7 @@ translation_of: Web/HTML/Element/picture
 
 
      Атрибут media
      
 
-
      Атрибут media позволяет определить медиа-запрос, который веб-браузер будет анализировать для выбора элемента {{HTMLElement("source")}}. Если медиа-запрос определяется как ложный (false), то элемент {{HTMLElement("source")}} пропускается.
      
+
      Атрибут media позволяет определить медиавыражение, которое веб-браузер будет анализировать для выбора элемента {{HTMLElement("source")}}. Если медиавыражение определяется как ложное (false), то элемент {{HTMLElement("source")}} пропускается.
      
 
 
      <picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
diff --git a/files/ru/web/html/element/source/index.html b/files/ru/web/html/element/source/index.html
index 45b22066ba..da74a50c32 100644
--- a/files/ru/web/html/element/source/index.html
+++ b/files/ru/web/html/element/source/index.html
@@ -50,7 +50,7 @@ translation_of: Web/HTML/Element/source
 
 
      
  
      {{htmlattrdef("sizes")}} {{experimental_inline}}
      
- 
      Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиа-запросов со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте {{htmlattrxref("srcset", "source")}}. Атрибут sizes работает только тогда, когда элемент  {{HTMLElement("source")}} расположен внутри элемента {{HTMLElement("picture")}}.
      
+ 
      Список размеров изображений для разных размеров страниц. Он состоит из разделённых запятыми медиавыражений со значениями ширины изображения. Эта информация используется браузером перед выкладкой страницы для определения конкретного изображения, заданного в атрибуте {{htmlattrxref("srcset", "source")}}. Атрибут sizes работает только тогда, когда элемент  {{HTMLElement("source")}} расположен внутри элемента {{HTMLElement("picture")}}.
      
  
      {{htmlattrdef("src")}}
      
  
      Требуемый для элементов  {{HTMLElement("audio")}} и {{HTMLElement("video")}} адрес медиа-ресурсов. Значение этого атрибута игнорируется браузером, когда элемент <source> размещён внутри элемента {{HTMLElement("picture")}}.
      
  
      {{htmlattrdef("srcset")}} {{experimental_inline}}
      
@@ -65,7 +65,7 @@ translation_of: Web/HTML/Element/source
  
      {{htmlattrdef("type")}}
      
  
      MIME-тип ресурса, опционально содержащий параметр codecs. Для получения полной информации по указанию кодеков смотрите  RFC 4281. 
      
  
      {{htmlattrdef("media")}} {{experimental_inline}}
      
- 
      Определяет медиа-запрос , согласно которому будет выводиться изображение. Работает только в элементе {{HTMLElement("picture")}}.
      
+ 
      Определяет медиавыражение , согласно которому будет выводиться изображение. Работает только в элементе {{HTMLElement("picture")}}.
      
 
      
 
 
      Если атрибут type не указан, то он запрашивается с сервера и проверяется, может ли {{Glossary("user agent")}} его обрабатывать. Если он не может быть обработан, проверяется следующий <source>. Если атрибут type указан, он сравнивается с типами, которые может поддерживать {{Glossary("user agent")}}​​​​​, и если он не распознан, сервер даже не запрашивается, вместо этого проверяется следующий элемент <source>.
      
diff --git a/files/ru/web/html/preloading_content/index.html b/files/ru/web/html/preloading_content/index.html
index 6aafc27ec5..01cfa703ff 100644
--- a/files/ru/web/html/preloading_content/index.html
+++ b/files/ru/web/html/preloading_content/index.html
@@ -166,7 +166,7 @@ translation_of: Web/HTML/Preloading_content
   </script>
 </body>
      
 
-
      Вы видите, что мы включаем media-атрибуты в наши элементы <link> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе Тест медиа-запросов).
      
+
      Вы видите, что мы включаем media-атрибуты в наши элементы <link> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе Тест медиавыражений).
      
 
 
      Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).
      
 
-- 
cgit v1.2.3-54-g00ecf