diff options
Diffstat (limited to 'files/ru/web/css/media_queries')
3 files changed, 8 insertions, 8 deletions
diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html index 148efccbea..63d4f820cb 100644 --- a/files/ru/web/css/media_queries/index.html +++ b/files/ru/web/css/media_queries/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/Media_Queries --- <div>{{CSSRef("CSS3 Media Queries")}}</div> -<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> +<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> -<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.</p> +<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.</p> <p>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.</p> 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 facf42b21c..34880c4015 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 @@ -42,7 +42,7 @@ mediaQueryList.addListener(handleOrientationChange); // Добавление к handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз. </pre> -<p>Этот код создает список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p> +<p>Этот код создаёт список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p> <p>Функция <code>handleOrientationChange()</code> будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:</p> @@ -57,11 +57,11 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика <p>Выше, мы определяем параметры как <code>evt</code> — event объект. Это имеет значение, поскольку <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">новые реализации <code>MediaQueryList</code></a> обрабатывают события стандартным способом. Они больше не используют нестандартный механизм {{domxref("MediaQueryListListener")}} , а используют стандартную настройку обработчика событий, передавая <a href="/en-US/docs/Web/API/Event">объект event</a> {{domxref("MediaQueryListEvent")}} как аргумент колбэк-функции.</p> -<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путем прямого доступа к нему или доступа к event объекту.</p> +<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путём прямого доступа к нему или доступа к event объекту.</p> <h2 id="Уведомление_о_завершении_выражения">Уведомление о завершении выражения</h2> -<p>Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:</p> +<p>Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определённой функции:</p> <pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange); </pre> 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 9923ab8f1e..07014138a2 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 @@ -4,7 +4,7 @@ slug: Web/CSS/Media_Queries/Using_media_queries tags: - Веб - Медиа - - Медиа верстка + - Медиа вёрстка - Медиавыражения - Отзывчивый дизайн - Продвинутый @@ -30,7 +30,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <h2 id="Узконаправленные_media">Узконаправленные @media</h2> -<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь) будет расположено над элементами:</p> +<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определённого {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь) будет расположено над элементами:</p> <pre class="brush: css">@media (hover: hover) { ... }</pre> @@ -38,7 +38,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <pre class="brush: css">@media (max-width: 12450px) { ... }</pre> -<p>Если вы создаете медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p> +<p>Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p> <pre class="brush: css">@media (color) { ... }</pre> |