From 4bb1a6452c19332bbd0345033196457dc933db21 Mon Sep 17 00:00:00 2001 From: focuse Date: Wed, 7 Aug 2019 19:26:51 +0200 Subject: [PATCH] fixed russian translation for css units (#31031) This article seems to be translated via google translate or something similar. Made the article more human-readable. Fixed typos. Fixed styles. --- guide/russian/css/units/index.md | 123 +++++++++++++++++++------------ 1 file changed, 77 insertions(+), 46 deletions(-) diff --git a/guide/russian/css/units/index.md b/guide/russian/css/units/index.md index b3e3f046ed..8124ec63cf 100644 --- a/guide/russian/css/units/index.md +++ b/guide/russian/css/units/index.md @@ -1,63 +1,95 @@ --- title: Units -localeTitle: Единицы +localeTitle: Единицы измерения --- -## Единицы +## Единицы измерения -Многие свойства CSS, такие как `width` , `margin` , `padding` , `font-size` и т. Д., Занимают много места. У CSS есть способ выразить длину в нескольких единицах. Длина представляет собой комбинацию числа и единицы без пробелов. Например, `5px` , `0.9em` и т. Д. +Многие свойства CSS, такие как `width` , `margin` , `padding` , `font-size` и т.д., определяют размеры. У CSS есть способ выразить длину в нескольких единицах. Длина представляет собой комбинацию числа и единицы без пробелов. Например, `5px` , `0.9em` и т. Д. -### длина +### Длина #### Единицы общей длины Для выражения длины используется CSS. Более старыми, поддерживаемыми всеми браузерами, являются: * **rem** - «r» означает «root»: «root em» -, который равен размеру шрифта, закрепленному на корневом элементе (почти всегда `` ). -* **vh** и **vw** - Многие гибкие методы веб-дизайна в значительной степени зависят от процентных правил. Тем не менее, процентные меры CSS не всегда являются лучшим решением для всех проблем. Мера **vh** равна 1/100 высоты окна просмотра. Так, например, если высота браузера равна 800px, 1vh равно 8px, и, аналогично, если ширина окна просмотра равна 650px, то 1vw эквивалентно 6.5px. -* **vmin** и **vmax.** Эти единицы связаны с максимальным или минимальным значением **vh** и **vw** . Например, если браузер был установлен на 1200px в ширину, а высота 600px, 1vmin будет 6px и 1vmax будет 12px. Однако, если ширина была установлена ​​равной 700px, а высота установлена ​​равной 1080px, vmin будет равен 7px и vmax 10.8px. +* **vh** и **vw** - Многие техники отзывчивого веб-дизайна в значительной степени зависят от процентных правил. Тем не менее, процентные меры CSS не всегда являются лучшим решением для всех проблем. Мера **vh** равна 1/100 высоты окна просмотра. Так, например, если высота браузера равна 800px, 1vh равно 8px, и, аналогично, если ширина окна просмотра равна 650px, то 1vw эквивалентно 6.5px. +* **vmin** и **vmax.** Эти единицы связаны с максимальным или минимальным значением **vh** и **vw** . Например, если браузер был установлен на 1200px в ширину, а высота 600px, 1vmin будет 6px и 1vmax будет 12px. Однако, если ширина была установлена равной 700px, а высота установлена равной 1080px, vmin будет равен 7px и vmax 10.8px. * **ex** и **ch** - эти единицы, аналогичные **em** и **rem** , полагаются на текущий шрифт и размер шрифта. Однако, в отличие от **em** и **rem** , эти единицы также полагаются на `font-family` поскольку они определяются на основе мер, специфичных для каждого шрифта. Блок **ch** («единица символа») определяется как ширина нулевого символа («0»). Единица **ex** определяется как «текущая x-высота текущего шрифта или половина 1em». Высота-x данного шрифта - это высота строчного «x» этого шрифта. Это часто средняя отметка шрифта. -| Единица | Описание | | --------------- | ----------------------- | | em | 1 em - вычисленное значение размера шрифта для элемента, на котором он используется. | | ex | 1 ex - текущая высота x шрифта. Обычно x-height (но не всегда, например, если в шрифте нет «x»), равном высоте строчки «x» | | ch | 1 ch - это продвижение глифа «0» (нуль) в текущем шрифте. «ch» означает характер. | | rem | 1 rem - вычисленное значение свойства font-size для корневого элемента документа. | | vw | 1vw составляет 1% от ширины окна просмотра. «vw» означает «ширина окна просмотра». | | vh | 1vh - 1% высоты окна просмотра. «vh» означает «высота видового экрана». | | vmin | равняется меньшему из «vw» или «vh» | | vmax | Равно больше, чем «vw» или «vh» | +| Unit | Description | +|---------------|-----------------------| +|em |1 em - вычисленное значение размера шрифта для элемента, на котором он используется. | +|ex |1 ex - текущая высота x шрифта. Обычно x-height (но не всегда, например, если в шрифте нет «x»), равном высоте строчки «x» | +|ch |1 ch - это ширина глифа «0» (нуль) в текущем шрифте. «ch» означает знак (character). | +|rem |1 rem - вычисленное значение свойства font-size для корневого элемента документа.| +|vw |1vw составляет 1% от ширины окна просмотра. «vw» означает «ширина окна просмотра». | +|vh |1vh - 1% высоты окна просмотра. «vh» означает «высота окна просмотра». | +|vmin |равняется меньшему из «vw» или «vh» | +|vmax |равняется большему из «vw» или «vh» | Существует два общих типа единиц, используемых для длины и размера в CSS: относительный и абсолютный. ### Относительные единицы - -Относительные единицы изменяются относительно текущего размера шрифта или других параметров. Некоторые относительные единицы - -* `em` -* ширину заглавной буквы M `font-size` текущего элемента. -* Размер шрифта наследуется от родительских элементов. -* Пример: `html div { font-size: 16px; } div h3 { font-size: 2rem; }` Здесь `

` будет равняться `32px` так как `font-size` текущего или родительского элемента равен `16px` . -* `rem` -* root `em` или ширину прописной буквы M базового `font-size` по умолчанию. -* Размер шрифта родителя не будет иметь эффекта. -* Пример: `html body { font-size: 16px; } p { font-size: 1.5rem; }` Здесь `

` будет равняться `24px` так как основной `font-size` по умолчанию - `16px` . -* `%` -* размер процента относительно размера родителя. -* Пример: `html div { width: 400px; } div p { width: 75%; }` Поскольку ширина родителя составляет `400px` , ширина внутреннего картографа будет `300px` или 75% от `400px` . -* `vw` -* ширину обзора или 1/100 ширины окна просмотра -* Пример: `html body { width: 100vw; }` `body` заполняет ширину окна просмотра, будь то 417px, 690px или любой ширины. -* `vh` -* высоты просмотра или 1/100-й высоты окна просмотра -* Пример: `html div { height: 50vh; }` Этот `div` будет заполнять половину высоты окна просмотра, будь то 1080px, 1300px или любой высоты. +- ```em``` + - Ширина заглавной буквы M ```font-size``` текущего элемента. + - Размер шрифта наследуется от родительских элементов. + - Пример: + ```html + div { + font-size: 16px; + } + div h3 { + font-size: 2rem; + } + ``` + Здесь ```

``` будет равняться ```32px``` так как ```font-size``` текущего или родительского элемента равен ```16px```. +- ```rem``` + - `em` корневого элемента или ширина прописной буквы M базового ```font-size``` по умолчанию. + - Размер шрифта родителя не будет иметь эффекта. + - Пример: + ```html + body { + font-size: 16px; + } + p { + font-size: 1.5rem; + } + ``` + Здесь ```

``` будет равняться ```24px``` так как основной ```font-size``` по умолчанию - ```16px```. +- ```%``` + - размер в процентах относительно размера родителя. + - Пример: + ```html + div { + width: 400px; + } + div p { + width: 75%; + } + ``` + Поскольку ширина родителя составляет ```400px``` , ширина внутреннего картографа будет ```300px``` или 75% от ```400px```. +- ```vw/vh``` + - ширина/высота экрана просмотра + - Пример: + ```html + body { + width: 100vw; + } + ``` + ```body``` заполняет всю ширину окна просмотра, будь то 417px, 690px или любое дрегое значение. ### Абсолютные единицы - -Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Некоторые абсолютные единицы - -* `px` -* пиксель -* количество пикселей зависит от качества экрана устройства просмотра -* `in` , `cm` , `mm` -* дюйм, сантиметр, мм -* Дюйм дюйм на маленьком экране или большом экране -* `pt` , `pc` -* очки (1/72 дюйма) и пик (12 очков) - -пример - +Абсолютные единицы будут одинаковыми независимо от размера экрана или других настроек. Вот некоторые абсолютные единицы: +- ```px``` + - пиксель + - количество пикселей зависит от качества экрана устройства просмотра +- ```in```, ```cm```, ```mm``` + - дюйм, сантиметр, мм + - Дюйм остается дюймом на экране любого размера. +- ```pt```, ```pc``` + - точки (1/72 дюйма) и пики (12 точек) +Пример ```html p { @@ -68,14 +100,13 @@ p { border-width: 3pt; } ``` +Абзац с ```font-size: 24px``` будет отображаться как 24px на экране телефона, планшета или рабочего стола. -Абзац с `font-size: 24px` будет отображаться как 24px на экране телефона, планшета или рабочего стола. - -`div` будет отображаться как 3 дюйма в ширину, а `border` на `div` будет иметь толщину 3/72 дюйма, независимо от размера экрана. +```div``` будет отображаться как 3 дюйма в ширину, а ```border``` на ```div``` будет иметь толщину 3/72 дюйма, независимо от размера экрана. ### Дополнительная информация: -* [WebPlatforms Общие сведения о пикселях и других единицах CSS](https://webplatform.github.io/docs/tutorials/understanding-css-units/) +* [WebPlatforms. Общие сведения о пикселях и других единицах CSS](https://webplatform.github.io/docs/tutorials/understanding-css-units/) * [MDN Web Docs - Единицы CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) * [Учебники по веб-дизайну]('https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573) -* [Справка HTML по CSS-единицам](http://www.htmlhelp.com/reference/css/units.html) \ No newline at end of file +* [Справка HTML по CSS-единицам](http://www.htmlhelp.com/reference/css/units.html)