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 | 24 |
1 files changed, 12 insertions, 12 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 55be5d624f..66e2244aaa 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -88,7 +88,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -109,12 +109,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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><code>target / context = result </code> </pre> <p>Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -145,14 +145,14 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Если вместо этого вы зададите <code>column-width</code>, то вы определите <em>минимальную </em>ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -163,7 +163,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -180,7 +180,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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 { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> @@ -194,7 +194,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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 { +<pre class="brush: css"><code>img { max-width: 100%; } </code> </pre> @@ -213,7 +213,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -252,7 +252,7 @@ h1 { <p>An interesting approach is to use the viewport unit <code>vw</code> to enable responsive typography. <code>1vw</code> is equal to one percent of the viewport width, meaning that if you set your font size using <code>vw</code>, it will always relate to the size of the viewport.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -260,7 +260,7 @@ h1 { <p>There is a solution, and it involves using <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. If you add the <code>vw</code> unit to a value set using a fixed size such as <code>em</code>s or <code>rem</code>s then the text will still be zoomable. Essentially, the <code>vw</code> unit adds on top of that zoomed value:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> @@ -274,7 +274,7 @@ h1 { <p>If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <code><head></code> of the document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.</p> |