diff options
Diffstat (limited to 'files/ru/learn/css/css_layout/responsive_design/index.html')
| -rw-r--r-- | files/ru/learn/css/css_layout/responsive_design/index.html | 30 |
1 files changed, 15 insertions, 15 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 76ee65f70c..6178dfa90b 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> @@ -70,7 +70,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Отзывчивый_дизайн">Отзывчивый дизайн</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Термин адаптивный дизайн был </span></span><a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a><span class="tlid-translation translation" lang="ru"><span title=""> и описывал использование трех методов в сочетании.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Термин адаптивный дизайн был </span></span><a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a><span class="tlid-translation translation" lang="ru"><span title=""> и описывал использование трёх методов в сочетании.</span></span></p> <ol> <li>Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (опубликовано в 2009 в A List Apart).</li> @@ -84,7 +84,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Media_Queries_Медиавыражения">Media Queries (Медиавыражения)</h2> -<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, <span class="tlid-translation translation" lang="ru"><span title="">что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определенная ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</span></span></p> +<p>Отзывчивый дизайн был способен появится только благодаря media query. Спецификация 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> @@ -103,11 +103,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Гибкие_сетки">Гибкие сетки</h2> -<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развернутым до максимума окном.</p> +<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.</p> <p>Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.</p> -<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путем присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> +<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> <pre class="notranslate"><code>target / context = result </code> </pre> @@ -119,7 +119,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн } </code> </pre> -<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><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> @@ -139,11 +139,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Современные_технологии_макетов">Современные технологии макетов</h2> -<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более легкий способ сделать так.</p> +<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.</p> <h3 id="Multicol">Multicol</h3> -<p>Самый старый из этих методов — это multicol, когда вы задаете <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> +<p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> <pre class="brush: css notranslate"><code>.container { column-count: 3; @@ -173,12 +173,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчета размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p> +<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p> </div> <h3 id="CSS_grid">CSS grid</h3> -<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создает grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> +<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> <pre class="brush: css notranslate"><code>.container { display: grid; @@ -187,12 +187,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: версия grid макета еще проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p> +<p><strong>Примечание</strong>: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p> </div> <h2 id="Отзывчивые_изображения">Отзывчивые изображения</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдете следующий CSS:</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:</p> <pre class="brush: css notranslate"><code>img { max-width: 100%; @@ -209,9 +209,9 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Отзывчивая_типография">Отзывчивая типография</h2> -<p>Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p> +<p>Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.</p> -<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p> +<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум <code>1200px</code>.</p> <pre class="brush: css notranslate"><code>html { font-size: 1em; @@ -228,7 +228,7 @@ h1 { } </code> </pre> -<p><span class="tlid-translation translation" lang="ru"><span title="">Мы отредактировали наш приведенный выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.</span> <span title="">Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.</span> <span title="">Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</span></span></p> <p>В мобильных версиях заголовок меньше:</p> |