From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../css/css_layout/responsive_design/index.html | 24 +++++++++++----------- 1 file changed, 12 insertions(+), 12 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 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/Отзывчивый_дизайн

Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

-
@media screen and (min-width: 800px) {
+
@media screen and (min-width: 800px) {
   .container {
     margin: 1em 2em;
   }
@@ -109,12 +109,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 
В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.

 
-
target / context = result 
+
target / context = result 
 

 
 
Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

 
-
.col {
+
.col {
   width: 6.25%; /* 60 / 960 = 0.0625 */
 } 
 

@@ -145,14 +145,14 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 
Самый старый из этих методов — это multicol, когда вы задаёте column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

 
-
.container {
+
.container {
   column-count: 3;
 } 
 

 
 
Если вместо этого вы зададите column-width, то вы определите минимальную ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.

 
-
.container {
+
.container {
   column-width: 10em;
 } 
 

@@ -163,7 +163,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 
В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

 
-
.container {
+
.container {
   display: flex;
 }
 
@@ -180,7 +180,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 
В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

 
-
.container {
+
.container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
 } 
@@ -194,7 +194,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 
Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:

 
-
img {
+
img {
   max-width: 100%;
 } 
 

@@ -213,7 +213,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 
 
В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px.

 
-
html {
+
html {
   font-size: 1em;
 }
 
@@ -252,7 +252,7 @@ h1 {
 
 
An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

 
-
h1 {
+
h1 {
   font-size: 6vw;
 }

 
@@ -260,7 +260,7 @@ h1 {
 
 
There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

 
-
h1 {
+
h1 {
   font-size: calc(1.5rem + 3vw);
 }

 
@@ -274,7 +274,7 @@ h1 {
 
 
If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <head> of the document.

 
-
<meta name="viewport" content="width=device-width,initial-scale=1">
+
<meta name="viewport" content="width=device-width,initial-scale=1">
 

 
 
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.

-- 
cgit v1.2.3-54-g00ecf