aboutsummaryrefslogtreecommitdiff
path: root/files/ru/learn/css/css_layout/responsive_design
diff options
context:
space:
mode:
authorAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
committerAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
commit55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch)
tree5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/learn/css/css_layout/responsive_design
parent08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff)
downloadtranslated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.gz
translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.bz2
translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.zip
Auto fixes
Diffstat (limited to 'files/ru/learn/css/css_layout/responsive_design')
-rw-r--r--files/ru/learn/css/css_layout/responsive_design/index.html12
1 files changed, 6 insertions, 6 deletions
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 ee270e0769..ba5149fc62 100644
--- a/files/ru/learn/css/css_layout/responsive_design/index.html
+++ b/files/ru/learn/css/css_layout/responsive_design/index.html
@@ -6,7 +6,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
---
<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
-<p><span class="tlid-translation translation" lang="ru"><span title="">На заре веб-дизайна страницы создавались для экрана определенного размера.</span></span> Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до<span class="tlid-translation translation" lang="ru"><span title=""> слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивого) веб-дизайна</em> </span></span><em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p>
+<p><span class="tlid-translation translation" lang="ru"><span title="">На заре веб-дизайна страницы создавались для экрана определенного размера.</span></span> Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до<span class="tlid-translation translation" lang="ru"><span title=""> слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивного) веб-дизайна</em> </span></span><em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p>
<table class="learn-box standard-table">
<tbody>
@@ -97,7 +97,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
<p>Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как <em>контрольные точки.</em></p>
-<p>Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо'льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном <strong>сначала мобильный</strong> (<strong>mobile first</strong>).</p>
+<p>Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном <strong>сначала мобильный</strong> (<strong>mobile first</strong>).</p>
<p>Узнать больше о <a href="/en-US/docs/Web/CSS/Media_Queries">Media Query</a> можно в документации MDN.</p>
@@ -127,7 +127,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
<figcaption></figcaption>
</figure>
-<p>На более широких экранах они премещаются в два столбца:</p>
+<p>На более широких экранах они перемещаются в два столбца:</p>
<figure><img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
<figcaption></figcaption>
@@ -159,7 +159,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
<h3 id="Flexbox">Flexbox</h3>
-<p><span class="tlid-translation translation" lang="ru"><span title="">В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения </span></span><code>flex-grow</code> и <code>flex-shrink</code> <span class="tlid-translation translation" lang="ru"><span title="">вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с бо'льшим или меньшим пространством вокруг себя.</span></span></p>
+<p><span class="tlid-translation translation" lang="ru"><span title="">В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения </span></span><code>flex-grow</code> и <code>flex-shrink</code> <span class="tlid-translation translation" lang="ru"><span title="">вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.</span></span></p>
<p>В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись <code>flex: 1</code> как описано в главе <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Гибкое изменение размеров flex элементов</a>.</p>
@@ -205,11 +205,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
<p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.</span></span></p>
-<p>Вы можете найти подробное <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">руководство по отзывчивым изображениям в разделе ищучения HTML </a>на MDN.</p>
+<p>Вы можете найти подробное <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">руководство по отзывчивым изображениям в разделе изучения HTML </a>на MDN.</p>
<h2 id="Отзывчивая_типография">Отзывчивая типография</h2>
-<p>Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо'льшую или меньшую площадь экрана.</p>
+<p>Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p>
<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p>