Skip to content

feat: edit css-units article.md ru #2162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
front42 wants to merge 1 commit into
base: master
Choose a base branch
from
+9 −9
Open

feat: edit css-units article.md ru #2162

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions 20-css-for-js/2-css-units/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</div>
```

`24` пикселей -- и в Африке `24` пикселей, поэтому размер шрифта в `<div>` одинаков.
`24` пикселя -- и в Африке `24` пикселя, поэтому размер шрифта в `<div>` одинаков.

А вот аналогичный пример с `em` вместо `px`:

Expand All @@ -66,7 +66,7 @@
</div>
```

Так как значение в `em` высчитывается относительно *текущего шрифта*, то вложенная строка в `1.5` раза больше, чем первая.
Так как значение в `em` высчитывается относительно *текущего шрифта*, то текст во вложенном `<div>` в `1.5` раза крупнее, чем в родительском.

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

Expand Down Expand Up @@ -160,7 +160,7 @@
<ul>
<li>от жизни
<ul>
<li>собачей</li>
<li>собачьей</li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -196,7 +196,7 @@
<ul>
<li>от жизни
<ul>
<li>собачей</li>
<li>собачьей</li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -245,7 +245,7 @@
<ul>
<li>от жизни
<ul>
<li>собачей</li>
<li>собачьей</li>
</ul>
</li>
</ul>
Expand All @@ -262,7 +262,7 @@
let html = document.documentElement;
up.onclick = function() {
// при помощи JS увеличить размер шрифта html на 2px
html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
html.style.fontSize = parseInt(getComputedStyle(html).fontSize) + 2 + 'px';
};
</script>
```
Expand All @@ -273,7 +273,7 @@ up.onclick = function() {

Единица `rem` не поддерживается в IE8-.

## Относительно экрана: vw, vh, vmin, vmax
## Относительно окна браузера: vw, vh, vmin, vmax

Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](https://drafts.csswg.org/css-values-3/):

Expand All @@ -297,8 +297,8 @@ up.onclick = function() {
Мы рассмотрели единицы измерения:

- `px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров.
- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты.
- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компонента.
- `rem` -- задаёт размер относительно шрифта `<html>`, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у `<html>`.
- `%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
- `vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана.
- `vw`, `vh`, `vmin`, `vmax` -- относительно размеров окна браузера.