mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-10 19:01:13 -04:00
4bb1a6452c
This article seems to be translated via google translate or something similar. Made the article more human-readable. Fixed typos. Fixed styles.
113 lines
7.8 KiB
Markdown
113 lines
7.8 KiB
Markdown
---
|
||
title: Units
|
||
localeTitle: Единицы измерения
|
||
---
|
||
## Единицы измерения
|
||
|
||
Многие свойства CSS, такие как `width` , `margin` , `padding` , `font-size` и т.д., определяют размеры. У CSS есть способ выразить длину в нескольких единицах. Длина представляет собой комбинацию числа и единицы без пробелов. Например, `5px` , `0.9em` и т. Д.
|
||
|
||
### Длина
|
||
|
||
#### Единицы общей длины
|
||
|
||
Для выражения длины используется CSS. Более старыми, поддерживаемыми всеми браузерами, являются:
|
||
|
||
* **rem** - «r» означает «root»: «root em» -, который равен размеру шрифта, закрепленному на корневом элементе (почти всегда `<html>` ).
|
||
* **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» этого шрифта. Это часто средняя отметка шрифта.
|
||
|
||
| 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;
|
||
}
|
||
```
|
||
Здесь ```<h3>``` будет равняться ```32px``` так как ```font-size``` текущего или родительского элемента равен ```16px```.
|
||
- ```rem```
|
||
- `em` корневого элемента или ширина прописной буквы M базового ```font-size``` по умолчанию.
|
||
- Размер шрифта родителя не будет иметь эффекта.
|
||
- Пример:
|
||
```html
|
||
body {
|
||
font-size: 16px;
|
||
}
|
||
p {
|
||
font-size: 1.5rem;
|
||
}
|
||
```
|
||
Здесь ```<p>``` будет равняться ```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 точек)
|
||
Пример
|
||
```html
|
||
|
||
p {
|
||
font-size: 24px;
|
||
}
|
||
div {
|
||
width: 3in;
|
||
border-width: 3pt;
|
||
}
|
||
```
|
||
Абзац с ```font-size: 24px``` будет отображаться как 24px на экране телефона, планшета или рабочего стола.
|
||
|
||
```div``` будет отображаться как 3 дюйма в ширину, а ```border``` на ```div``` будет иметь толщину 3/72 дюйма, независимо от размера экрана.
|
||
|
||
### Дополнительная информация:
|
||
|
||
* [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)
|