Unify translation of "Media Query" to Russian (#343)

* Unify translatioin of "mediaquery" to Russian

* Update files/ru/learn/css/css_layout/responsive_design/index.html

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

* Update files/ru/learn/css/css_layout/responsive_design/index.html

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

* Update files/ru/learn/css/css_layout/responsive_design/index.html

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

* Update files/ru/learn/css/css_layout/responsive_design/index.html

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

* Update files/ru/learn/css/css_layout/responsive_design/index.html

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

* Update files/ru/learn/css/css_layout/responsive_design/index.html

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

* Update files/ru/web/css/media_queries/index.html

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

Co-authored-by: Artem Shibakov <shibakow@gmail.com>

5 files changed, 16 insertions, 16 deletions

diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html
index b48c895084..7edb7ea011 100644
--- a/files/ru/learn/css/css_layout/floats/index.html
+++ b/files/ru/learn/css/css_layout/floats/index.html
@@ -510,7 +510,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство новичка в media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство по медиавыражениям для новичков</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макета</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html
index 0124d58ae8..14b11aadda 100644
--- a/files/ru/learn/css/css_layout/multiple-column_layout/index.html
+++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html
@@ -462,7 +462,7 @@ h2 {
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство новичка в media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство по медиавыражениям для новичков</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html
index 13c7c1dafd..565bd6577a 100644
--- a/files/ru/learn/css/css_layout/positioning/index.html
+++ b/files/ru/learn/css/css_layout/positioning/index.html
@@ -574,7 +574,7 @@ dt {
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство новичка в media queries</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство по медиавыражениям для новичков</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
  <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
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 62d427f5c5..f7d8bdfd2b 100644
--- a/files/ru/learn/css/css_layout/responsive_design/index.html
+++ b/files/ru/learn/css/css_layout/responsive_design/index.html
@@ -75,16 +75,16 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 <ol>
  <li>Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (опубликовано в 2009 в A List Apart).</li>
  <li>Вторым методом была идея <a href="http://unstoppablerobotninja.com/entry/fluid-images">жидких изображений</a>. Используя очень простой метод настройки свойства <code>max-width</code> на <code>100%</code>, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.</li>
- <li>Третьим ключевым компонентом был <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a>. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.</li>
+ <li>Третьим ключевым компонентом были <a href="/en-US/docs/Web/CSS/Media_Queries">медиавыражения</a>. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.</li>
 </ol>
 
-<p>Очень важно понять, что <strong>адаптивный веб-дизайн </strong>— <strong>это не отдельная технология</strong>, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. <span class="tlid-translation translation" lang="ru"><span title="">В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и </span></span>media query<span class="tlid-translation translation" lang="ru"><span title="">, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и </span></span>у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.</p>
+<p>Очень важно понять, что <strong>адаптивный веб-дизайн </strong>— <strong>это не отдельная технология</strong>, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. <span class="tlid-translation translation" lang="ru"><span title="">В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и </span></span>медиавыражения<span class="tlid-translation translation" lang="ru"><span title="">, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и </span></span>у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.</p>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.</span></span></p>
 
-<h2 id="Media_Queries_Медиавыражения">Media Queries (Медиавыражения)</h2>
+<h2 id="Медиавыражения">Медиавыражения</h2>
 
-<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p>
+<p>Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p>
 
 <p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p>
 
@@ -95,11 +95,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 } </code>
 </pre>
 
-<p>Вы можете добавлять несколько медиавыражений в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как <em>контрольные точки.</em></p>
+<p>Вы можете добавлять несколько медиавыражений в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так, чтобы наилучшим образом соответствовать разным размерам экрана. Точки, в которых применяются медиавыражения и меняется макет, известны как <em>контрольные точки.</em></p>
 
-<p>Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном <strong>сначала мобильный</strong> (<strong>mobile first</strong>).</p>
+<p>Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют <strong>mobile first</strong> дизайном.</p>
 
-<p>Узнать больше о <a href="/en-US/docs/Web/CSS/Media_Queries">Media Query</a> можно в документации MDN.</p>
+<p>Узнать больше о <a href="/en-US/docs/Web/CSS/Media_Queries">медиавыражениях</a> можно в документации MDN.</p>
 
 <h2 id="Гибкие_сетки">Гибкие сетки</h2>
 
@@ -121,7 +121,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревших методов макетов</a>. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.</p>
 
-<p>Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:</p>
+<p>Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:</p>
 
 <figure><img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
 <figcaption></figcaption>
@@ -207,11 +207,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 <p>Вы можете найти подробное <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">руководство по отзывчивым изображениям в разделе изучения HTML </a>на MDN.</p>
 
-<h2 id="Отзывчивая_типография">Отзывчивая типография</h2>
+<h2 id="Отзывчивая_типографика">Отзывчивая типографика</h2>
 
-<p>Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p>
+<p>Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.</p>
 
-<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p>
+<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум <code>1200px</code>.</p>
 
 <pre class="brush: css notranslate"><code>html {
   font-size: 1em;
@@ -246,7 +246,7 @@ h1 {
 <p><strong>Примечание</strong>: смотрите этот пример в действии: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">исходный код</a>.</p>
 </div>
 
-<p>Такой подход к типографии показывает, что вам не надо ограничивать media queries <span class="tlid-translation translation" lang="ru"><span title="">только изменением макета страницы.</span></span> Они могут быть использоваться для <span class="tlid-translation translation" lang="ru"><span title="">настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.</span></span></p>
+<p>Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений <span class="tlid-translation translation" lang="ru"><span title="">только изменением макета страницы.</span></span> Они могут быть использоваться для <span class="tlid-translation translation" lang="ru"><span title="">настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.</span></span></p>
 
 <h3 id="Using_viewport_units_for_responsive_typography">Using viewport units for responsive typography</h3>
 
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 9a1932d070..7dfa8a7070 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
@@ -86,7 +86,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  <li><strong>Актуальная ширина картинки</strong> <strong>в пикселах </strong>(<code>480w</code>) — заметьте, что здесь используется <code>w</code> вместо <code>px</code>, как вы могли ожидать.  Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать  <kbd>Cmd</kbd> + <kbd>I</kbd> , чтобы вывести информацию на экран).</li>
 </ol>
 
-<p><strong><code>sizes</code></strong> определяет перечень медиа-выражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиа-выражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:</p>
+<p><strong><code>sizes</code></strong> определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:</p>
 
 <ol>
  <li><strong>Медиа-условие</strong> (<code>(max-width:480px)</code>) — вы можете больше узнать об этом в <a href="/en-US/docs/Learn/CSS">CSS topic</a>, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".</li>