You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 20-css-for-js/2-css-units/article.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -55,7 +55,7 @@
55
55
</div>
56
56
```
57
57
58
-
`24`пикселей -- и в Африке `24`пикселей, поэтому размер шрифта в `<div>` одинаков.
58
+
`24`пикселя -- и в Африке `24`пикселя, поэтому размер шрифта в `<div>` одинаков.
59
59
60
60
А вот аналогичный пример с `em` вместо `px`:
61
61
@@ -66,7 +66,7 @@
66
66
</div>
67
67
```
68
68
69
-
Так как значение в `em` высчитывается относительно *текущего шрифта*, то вложенная строка в `1.5` раза больше, чем первая.
69
+
Так как значение в `em` высчитывается относительно *текущего шрифта*, то текст во вложенном `<div>`в `1.5` раза крупнее, чем в родительском.
70
70
71
71
Выходит, размеры, заданные в `em`, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.
72
72
@@ -160,7 +160,7 @@
160
160
<ul>
161
161
<li>от жизни
162
162
<ul>
163
-
<li>собачей</li>
163
+
<li>собачьей</li>
164
164
</ul>
165
165
</li>
166
166
</ul>
@@ -196,7 +196,7 @@
196
196
<ul>
197
197
<li>от жизни
198
198
<ul>
199
-
<li>собачей</li>
199
+
<li>собачьей</li>
200
200
</ul>
201
201
</li>
202
202
</ul>
@@ -245,7 +245,7 @@
245
245
<ul>
246
246
<li>от жизни
247
247
<ul>
248
-
<li>собачей</li>
248
+
<li>собачьей</li>
249
249
</ul>
250
250
</li>
251
251
</ul>
@@ -262,7 +262,7 @@
262
262
let html = document.documentElement;
263
263
up.onclick = function() {
264
264
// при помощи JS увеличить размер шрифта html на 2px
Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта [CSS Values and Units 3](https://drafts.csswg.org/css-values-3/):
279
279
@@ -297,8 +297,8 @@ up.onclick = function() {
297
297
Мы рассмотрели единицы измерения:
298
298
299
299
- `px` -- абсолютные пиксели, к которым привязаны и потому не нужны `mm`, `cm`, `pt` и `pc`. Используется для максимально конкретного и точного задания размеров.
300
-
- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компоненты.
300
+
- `em` -- задаёт размер относительно шрифта родителя, можно относительно конкретных символов: `"x"`(`ex`) и `"0"`(`ch`), используется там, где нужно упростить масштабирование компонента.
301
301
- `rem` -- задаёт размер относительно шрифта `<html>`, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в `rem`, а JS меняет шрифт у `<html>`.
302
302
- `%` -- относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
303
-
- `vw`, `vh`, `vmin`, `vmax` -- относительно размера экрана.
303
+
- `vw`, `vh`, `vmin`, `vmax` -- относительно размеров окна браузера.
0 commit comments