diff options
Diffstat (limited to 'files/ru/learn/css/css_layout')
10 files changed, 24 insertions, 24 deletions
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index fcb1840af7..324f802c37 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -90,7 +90,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете также распологать flex элементы в обратном направлении, используя значения <code>row-reverse</code> и <code>column-reverse</code>. Попробуйте их тоже!</p> +<p><strong>Примечание</strong>: Вы можете также располагать flex элементы в обратном направлении, используя значения <code>row-reverse</code> и <code>column-reverse</code>. Попробуйте их тоже!</p> </div> <h2 id="Перенос_строк">Перенос строк</h2> diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 4c4914cbe9..86ff3ac15d 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -77,7 +77,7 @@ translation_of: Learn/CSS/CSS_layout/Floats padding: 1em; }</pre> -<p>Если вы сохраните и обнавите сейчас, то <span class="tlid-translation translation" lang="ru"><span title="">вы увидите нечто похожее на следующее</span></span>:</p> +<p>Если вы сохраните и обновите сейчас, то <span class="tlid-translation translation" lang="ru"><span title="">вы увидите нечто похожее на следующее</span></span>:</p> <div id="Float_1"> <div class="hidden"> @@ -131,7 +131,7 @@ translation_of: Learn/CSS/CSS_layout/Floats } </pre> -<p>Чтобы эфект был лучше виден, измените <code>margin-right</code> обтекаемого объекта на <code>margin</code>, так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.</p> +<p>Чтобы эффект был лучше виден, измените <code>margin-right</code> обтекаемого объекта на <code>margin</code>, так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.</p> <div id="Float_2"> <div class="hidden"> diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index f94f97fb10..903cefd2be 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -477,7 +477,7 @@ body { <h2 id="Родные_CSS_Сетки_с_Grid_Layout">Родные CSS Сетки с Grid Layout</h2> -<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы еще не можем использовать встроенную сетовую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p> +<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы еще не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p> <p>В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.</p> diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html index a4fcfa8ac5..d5bc2e8e58 100644 --- a/files/ru/learn/css/css_layout/index.html +++ b/files/ru/learn/css/css_layout/index.html @@ -25,7 +25,7 @@ translation_of: Learn/CSS/CSS_layout --- <div>{{LearnSidebar}}</div> -<p class="summary">К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как иcпользовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</p> +<p class="summary">К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</p> <h2 id="Необходимые_условия">Необходимые условия</h2> @@ -70,7 +70,7 @@ translation_of: Learn/CSS/CSS_layout <dd>Grid-системы - это очень распространенная возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей верстки. Вы представляете свою верстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старыми браузерами</a></dt> <dd> - <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приорететны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p> + <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы верстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p> </dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие верстки</a></dt> <dd>Оценка ваших знаний различных методов верстки посредством вёрстки веб-страницы.</dd> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index fd443580da..422a215b1c 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -22,7 +22,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </tbody> </table> -<p>Методы компановки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.</p> +<p>Методы компоновки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.</p> <ul> <li>Нормальный поток</li> @@ -57,7 +57,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Заметьте, что HTML элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.</p> -<p>Элементы, выводящеся один <em>под</em> другим, называются <em>блочными</em>, в противоположность <em>строчным</em>, которые выводятся один <em>вслед</em> за другим, как отдельные слова в обычном абзаце текста.</p> +<p>Элементы, выводящиеся один <em>под</em> другим, называются <em>блочными</em>, в противоположность <em>строчным</em>, которые выводятся один <em>вслед</em> за другим, как отдельные слова в обычном абзаце текста.</p> <div class="note"> <p><strong>Примечание</strong>: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).</p> @@ -68,10 +68,10 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Методы CSS, которыми вы можете управлять разметкой элементов:</p> <ul> - <li><strong>Свойство {{cssxref("display")}} </strong>— Стандартные значениея <code>block</code>, <code>inline</code> или <code>inline-block </code>могут изменять поведение элементов в обычном потоке (см.подробнее <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). Также можно менять сами методы разметки такими значениями свойства <code>display</code>, как <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>Свойство {{cssxref("display")}} </strong>— Стандартные значения <code>block</code>, <code>inline</code> или <code>inline-block </code>могут изменять поведение элементов в обычном потоке (см.подробнее <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). Также можно менять сами методы разметки такими значениями свойства <code>display</code>, как <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> <li><strong>Floats</strong> — Применение значения {{cssxref("float")}} типа <code>left</code> может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.</li> <li><strong>Свойство {{cssxref("position")}} </strong>— Позволяет точно контролировать положение блоков внутри других блоков. <code>static</code> позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.</li> - <li><strong>Макет Таблицы</strong> — свойства для разметки таблиц могут быть использованы и для нетабличных элеметов, с помощью <code>display: table</code> и соотвествующих свойств.</li> + <li><strong>Макет Таблицы</strong> — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью <code>display: table</code> и соответствующих свойств.</li> <li><strong>Multi-column layout</strong> — <a href="/en-US/docs/Web/CSS/CSS_Columns">Многоколоночный макет</a> поможет расположить содержимое столбцами, как в газетах.</li> </ul> @@ -122,7 +122,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>В дополнение к свойствам, применяемым к контейнеру, существуют свойства, применяемые ко вложенным элементам. Эти свойства помимо всего прочего, могут менять размеры элемента, растягивая его и заставляя занимать всё доступное место.</p> -<p>В качестве простого примера, добавим свойство {{cssxref("flex")}} ко всем дочерним элементам, со значением <code>1</code>. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное местро убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы станут меньше, для того, чтобы все они были одного размера.</p> +<p>В качестве простого примера, добавим свойство {{cssxref("flex")}} ко всем дочерним элементам, со значением <code>1</code>. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы станут меньше, для того, чтобы все они были одного размера.</p> <div id="Flex_2"> <div class="hidden"> @@ -466,7 +466,7 @@ p { <p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> -<p>Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагется поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства {{cssxref("top")}} и {{cssxref("left")}} имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">позиционированию</a>.</p> +<p>Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагается поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства {{cssxref("top")}} и {{cssxref("left")}} имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">позиционированию</a>.</p> <h3 id="Fixed_positioning">Fixed positioning</h3> 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 7aa24804af..f61c802400 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 @@ -21,7 +21,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <tr> <th scope="row">Задача:</th> <td> - <p>Изучить как создавать макет с неколькими столбцами на веб-страницах, такой как вы модете найти в газете.</p> + <p>Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете.</p> </td> </tr> </tbody> @@ -31,7 +31,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый <em>multicol. </em>Вы можете следовать за нами <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">скачав файл отправной точки multicol</a> и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.</p> -<p>Наша отправная точка содержит немного очень простого HTML; обертака с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p> +<p>Наша отправная точка содержит немного очень простого HTML; обертка с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p> <p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p> diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html index c77636aa31..ddad3379d7 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.html +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -38,7 +38,7 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>Это объясняет отдельные элементы, но как насчет того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p> -<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они распологаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p> +<p>Встроенные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завернутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p> <p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остается, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p> diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 23a3818574..59669413f4 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -401,7 +401,7 @@ p:nth-of-type(1) { <h3 id="position_sticky">position: sticky</h3> -<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определенной пороговой точки (напрмер, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определенной точки, а затем задерживать в верхней части страницы.</span></span></p> +<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. <span class="tlid-translation translation" lang="ru"><span title="">По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определенной пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определенной точки, а затем задерживать в верхней части страницы.</span></span></p> <div id="Sticky_1"> <div class="hidden"> diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html index 1dbbc6012b..2f5c145b3c 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html @@ -73,7 +73,7 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples <p>Итак, у нас есть элемент {{htmlelement ("section")}} с <code>классом</code> <code>info-box</code>, который содержит {{htmlelement ("ul")}} и {{htmlelement ("div")}}. Неупорядоченный список содержит три элемента списка со ссылками внутри, которые станут фактическими вкладками для отображения наших панелей контента. <code>div</code> содержит три элемента {{htmlelement ("article")}}, которые будут составлять панели содержимого, соответствующие каждой вкладке. Каждая панель содержит некоторый образец контента.</p> -<p>Идея здесь заключается в том, что мы будем стилизовать вкладки, чтобы они выглядели как стандартное меню горизонтальной навигации и нарисуем панели, чтобы они сидели друг над другом, используя абсолютное позиционирование. Мы также предоставим вам немного JavaScript для включения на вашу страницу, чтобы отобразить соответствующую панель при нажатии вкладки и вы создатите саму вкладку. Вам не нужно будет понимать сам JavaScript на данном этапе, но вы должны подумать об изучении базового <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> как можно скорее - чем сложнее ваши функции пользовательского интерфейса, тем больше вероятность того, что вам понадобится JavaScript для реализации желаемую функциональность.</p> +<p>Идея здесь заключается в том, что мы будем стилизовать вкладки, чтобы они выглядели как стандартное меню горизонтальной навигации и нарисуем панели, чтобы они сидели друг над другом, используя абсолютное позиционирование. Мы также предоставим вам немного JavaScript для включения на вашу страницу, чтобы отобразить соответствующую панель при нажатии вкладки и вы создадите саму вкладку. Вам не нужно будет понимать сам JavaScript на данном этапе, но вы должны подумать об изучении базового <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> как можно скорее - чем сложнее ваши функции пользовательского интерфейса, тем больше вероятность того, что вам понадобится JavaScript для реализации желаемую функциональность.</p> <h3 id="Общая_настройка">Общая настройка</h3> @@ -101,7 +101,7 @@ body { margin: 0 auto; }</pre> -<p>Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюкa. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p> +<p>Это задает конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p> <h3 id="Укладка_наших_вкладок">Укладка наших вкладок</h3> 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> |