From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- files/ru/learn/css/css_layout/responsive_design/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'files/ru/learn/css/css_layout/responsive_design') 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/Отзывчивый_дизайн ---
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
-

На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивого) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

+

На заре веб-дизайна страницы создавались для экрана определенного размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

@@ -97,7 +97,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

Вы можете добавлять несколько медиа запросов в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так чтоб соответствовать наилучшим образом разным размерам экрана. Точки, в которых применяется media query и меняется макет, известны как контрольные точки.

-

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для бо'льших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

+

Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

Узнать больше о Media Query можно в документации MDN.

@@ -127,7 +127,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
-

На более широких экранах они премещаются в два столбца:

+

На более широких экранах они перемещаются в два столбца:

A desktop view of a layout with two columns.
@@ -159,7 +159,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

Flexbox

-

В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с бо'льшим или меньшим пространством вокруг себя.

+

В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

@@ -205,11 +205,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.

-

Вы можете найти подробное руководство по отзывчивым изображениям в разделе ищучения HTML на MDN.

+

Вы можете найти подробное руководство по отзывчивым изображениям в разделе изучения HTML на MDN.

Отзывчивая типография

-

Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать бо'льшую или меньшую площадь экрана.

+

Элементом отзывчивого дизайна, не освещенного ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаем меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум 1200px.

-- cgit v1.2.3-54-g00ecf