Что такое относительные единицы измерения
Размер
Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.
| Единица | Описание |
|---|---|
| em | Размер шрифта текущего элемента |
| ex | Высота символа x |
| ch | Ширина символа 0 текущего элемента |
| rem | Размер шрифта корневого элемента |
Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.
Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.
| Единица | Описание |
|---|---|
| vw | 1% от ширины области просмотра |
| vh | 1% от высоты области просмотра |
| vmin | 1% от меньшего значения из ширины и высоты области просмотра |
| vmax | Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1% |
Абсолютные единицы
Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.
Система относительных единиц
Для упрощения вычислений при расчетах параметров в системах передачи электроэнергии, применяют систему относительных единиц. Этот способ подразумевает выражение текущего значения системной величины через принятую за единицу базовую (базисную) величину.
Так, относительная величина выражается как множитель базового значения (тока, напряжения, сопротивления, мощности и т. д.), и не зависит, будучи выражена в относительных единицах, от уровня напряжения. В англоязычной литературе относительные единицы обозначаются pu или p.u. (от per-unit system — система относительных единиц).
Например, для однотипных трансформаторов, падение напряжения, импеданс и потери отличаются при разном подаваемом напряжении по абсолютной величине. Но по относительной величине они будут оставаться примерно одинаковыми. Когда расчет произведен, то результаты легко переводятся обратно в системные единицы (в амперы, в вольты, в омы, в ватты и т. д.), поскольку базисные величины, с которыми сравнивали текущие значения, известны изначально.
Как правило, относительные единицы удобны при расчетах передаваемой мощности, но часто бывает, что параметры генераторов моторов и трансформаторов указываются и в относительных единицах, поэтому каждому инженеру следует быть знакомым с концепцией относительных единиц. Единицы мощности, силы тока, напряжения, импеданса, адмиттанса — используются в системе относительных единиц. Мощность и напряжение являются независимыми величинами, это продиктовано свойствами реальных энергосистемам.
Все системные сетевые величины могут быть выражены как множители выбранных базисных значений. Так, если говорить о мощности, то в качестве базисной величины можно выбрать номинальную мощность трансформатора. Бывает, что мощность, полученная в конкретный момент времени в виде относительного значения сильно облегчает вычисления. Базис для напряжения — номинальное напряжение шины и т. д.
Вообще, контекст всегда позволяет понять, о какой относительной величине идет речь, и даже наличие одного и того же символа «pu» в англоязычной литературе не будет вас смущать.
Итак, все системные физические величины являются именованными. Но при переводе их в относительные единицы (по сути — в проценты), характер теоретических выкладок обобщается.
Под относительным значением какой-нибудь физической величины понимается ее отношение к некоторому базовому значению, то есть к значению, выбранному за единицу при данном измерении. Относительная величина обозначается символом звездочки снизу.
Часто при расчетах в качестве базисных величин принимают: базисное сопротивление, базисный ток, базисное напряжение и базисную мощность.
Нижний индекс «б» обозначает, что это базисная величина.
Тогда относительные единицы измерения будут называться относительными базисными:
К примеру, для измерения угловых скоростей, за единицу принимают угловую синхронную скорость, и значит угловая скорость синхронная будет равна угловой скорости базисной.
А произвольная угловая скорость тогда может быть выражена в относительных единицах:
Соответствующим образом в качестве базисных могут быть приняты для потокосцепления и для индуктивности следующие соотношения:
Здесь базисное потокосцепление — потокосцепление, индуцирующее базисное напряжение при базисной угловой скорости.
Так, если синхронная угловая скорость принята за базис, то:
в относительных единицах ЭДС равно потокосцеплению, а индуктивное сопротивление равно индуктивности. Так получается потому, что базисные единицы выбраны соответствующим образом.
Далее рассмотрим в относительных и базисных единицах фазное напряжение:
Легко видеть, что фазное напряжение в относительных базисных единицах оказывается равным линейному относительному базисному напряжению. Аналогичным образом и амплитудное значение напряжения в относительных единицах оказывается равным действующему:
Важно здесь отметить, что и для любого элемента электрической цепи, относительное сопротивление будет равно относительному падению напряжения в условиях номинальной мощности, подаваемой в цепь.
При расчетах токов короткого замыкания, пользуются четырьмя базисными параметрами: ток, напряжение, сопротивление и мощность. Базисные значения напряжения и мощности принимают независимыми, и через них потом выражают базисные сопротивление и ток. Из уравнения мощности трехфазной сети — ток, затем по закону Ома — сопротивление:
Так как базисная величина может быть выбрана произвольно, то одна и та же физическая величина может, при выражении ее в относительных единицах, иметь различные числовые значения. Относительные сопротивления генераторов, двигателей, трансформаторов, задаются поэтому в относительных единицах посредством введения относительных номинальных единиц. Sн — номинальная мощность. Uн — номинальное напряжение. А относительные номинальные величины записываются с нижним индексом «н»:
Для нахождения номинальных сопротивлений и токов применяют стандартные формулы:
Чтобы установить связь между относительными единицами и именованными величинами, сначала выразим связь между относительной базисной и базисной величинами:
Распишем базовое сопротивление через мощность, и подставим:
Так можно перевести именованную величину в относительную базисную.
И аналогичным образом можно установить связь между относительными номинальными единицами и именованными:
Для вычисления сопротивления в именованных единицах при известных относительных номинальных, используют следующую формулу:
Связь между относительными номинальными единицами и относительными базисными единицами устанавливает следующая формула:
При помощи этой формулы относительные номинальные единицы можно перевести в относительные базисные единицы.
В энергосистемах с целью ограничения токов короткого замыкания устанавливают токоограничительные реакторы, по сути — линейные индуктивности. Для них задаются номинальные напряжение и ток, но не мощность.
и преобразовав приведенные выше выражения для относительного номинального и относительного базового сопротивлений, получим:
Могут быть выражены относительные величины и в процентах:
Если Вам понравилась эта статья, поделитесь ссылкой на неё в социальных сетях. Это сильно поможет развитию нашего сайта!
Подписывайтесь на наш канал в Telegram!
Просто пройдите по ссылке и подключитесь к каналу.
Не пропустите обновления, подпишитесь на наши соцсети:
Размер
Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.
Относительные единицы
Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.
| Единица | Описание |
|---|---|
| em | Размер шрифта текущего элемента |
| ex | Высота символа x |
| ch | Ширина символа 0 текущего элемента |
| rem | Размер шрифта корневого элемента |
Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.
Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.
| Единица | Описание |
|---|---|
| vw | 1% от ширины области просмотра |
| vh | 1% от высоты области просмотра |
| vmin | 1% от меньшего значения из ширины и высоты области просмотра |
| vmax | Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1% |
Абсолютные единицы
Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.
Front-end шпаргалка: единицы измерения
Для каждой ситуации в верстке лучше использовать подходящие единицы измерения. Верстать только в пикселях значит не учитывать адаптивность. Применять только проценты — делать макет с зависимыми друг от друга блоками. Не использовать rem — переписывать весь код, если заказчик попросит сделать «покрупнее». В верстке десятки единиц измерения и лучше сочетать их, чтобы облегчить работу себе и добиться лучших результатов.
Абсолютные единицы
Измеряются в точных (абсолютных) значениях:
Дюйм пришел из английской системы мер, пика и поинт — из типографики, сантиметр и миллиметр — из метрической системы мер. И только пиксель пришел из веба. Однако размер пикселя, который используется в верстке, отличается от обычного.
1in = 6pc = 72pt = 96px
Посмотрите, как выглядит текст в разных абсолютных единицах измерений.
На практике обычно используются пиксели, другие единицы измерений — крайне редко. Например, сантиметр и миллиметр понадобятся, если на сайте есть элемент, который должен распечатываться в строгом размере: бейдж для выставки или почтовый адрес, который вкладывают в карман конверта. Подобные задачи могут встретиться пару раз в жизни.
Относительные единицы
Процент берется от различных свойств. 1% всегда равен 1/100 родительского элемента.
Viewport — область просмотра, т.е. та часть окна браузера, которая доступна пользователю. У браузера есть техническая часть: адресная строка, открытые вкладки, виджеты — они не входят. Но в viewport входят полосы прокрутки.
1vw = 1/100 ширины окна браузера
1vh = 1/100 высоты окна браузера
1vmin = меньшее из значений 1vw и 1vh.
1vmax = большее из значений 1vw и 1vh
Поддерживается не всеми браузерами. Проверяйте с помощью ресурса Can I Use.
Иногда возникает путаница при выборе «проценты или viewport». Размер в процентах будет считаться от размера контейнера, а viewport — от области просмотра экрана. Допустим, вы установили значение 10vw. Тогда на экране с шириной 800px размер составит 80px.
Размер шрифта в пикселях
Viewport помогает добиться масштабируемости текста. Чем больше экран, тем более крупный шрифт будет показываться. Однако может случиться ситуация, когда шрифт станет слишком мелким и нечитаемым. Чтобы этого избежать, применяйте функцию calc (). Поставьте базовый размер шрифта, допустим, 12px, и добавьте значение vw:
Тогда текст станет более динамичным и предсказуемым. Если не хотите использовать calc, работайте с препроцессорами.
Шрифтозависимые единицы
1em = размер родительского элемента
1rem = размер шрифта корневого элемента
1ex = высота символа X
1ch = ширина символа 0
Единицы измерения привязаны к шрифту. Они помогают связать размер шрифта с размерами блоков и отступов. При смене семейства шрифта размеры, установленные через ex и ch, меняются. На практике ex и ch используются редко. Основные используемые единицы — em и rem. Если em не задан, берется значения по умолчанию, установленное в большинстве браузеров — 16px. Единица rem считается от базового значения, а em — от родителя.
Использование rem помогает изменять шрифт всего сайта. Это очень удобно при верстке адаптивных страниц. Задавайте размеры шрифта для каждого устройства отдельно. Например, десктоп-версия — 16px, планшеты — 12px, смартфоны — 10px. На экране устройства шрифт будет отображаться в зависимости от присвоенного значения.
На примере шрифт для сайта задан 16px. Это и есть заданное значение rem для сайта. Дополнительно прописали значение rem для экранов маленьких размеров шириной до 400px — 10px. Таким образом, на десктопах шрифт будет 16px, а на мобильных устройствах — 10px. Ширина экрана изменялась, автоматически поменялся шрифт на всем сайте.
Единица em работает иначе и зависит от родителя. Поэтому на разных участках кода она принимает разные значения. Есть отличный пример для иллюстрации. Допустим, мы задаем нижние отступы относительно размера текста в блоке через em. В обоих случаях, и в заголовке и абзаце, отступ равен 1em. Но в заголовке em = 32px, потому что font-size родителя 32px, а в абзаце — 16px, и здесь размер шрифта — 16px.
Еще пример. Мы задали отдельный класс для родительского блока. Теперь размер зависит только от него, а не от размера шрифта всего документа.
Используйте em и rem, когда дизайн построен на точных пропорциях и важны размеры отступов, блоков и шрифтов. Если сверстать полностью на em и rem, изменение размера шрифта автоматически пропорционально скорректирует остальные элементы. Дизайн останется гармоничным, а вам нужно будет поменять только одну строчку кода.
Что использовать?
Выбор единиц зависит от задач проекта, поэтому принимайте отдельное решение в каждом конкретном случае. На ресурсах, откуда пользователи распечатывают материалы, используйте pt или pc. Если при печати нужны точные размеры, задавайте cm и mm. Для пропорциональных дизайнов, привязанных к размерам друг друга, берите em и rem. Для мультимедийных и резиновых форматов задавайте в процентах или через viewport.
Основное правило — подбирайте единицы измерения, наиболее простые в поддержке данного проекта.
Запомнить
Для каждой ситуации в верстке лучше использовать подходящие единицы измерения. Верстать только в пикселях значит не учитывать адаптивность. Применять только проценты — делать макет с зависимыми друг от друга блоками. Не использовать rem — переписывать весь код, если заказчик попросит сделать «покрупнее». В верстке десятки единиц измерения и лучше сочетать их, чтобы облегчить работу себе и добиться лучших результатов.
Абсолютные единицы
Измеряются в точных (абсолютных) значениях:
Дюйм пришел из английской системы мер, пика и поинт — из типографики, сантиметр и миллиметр — из метрической системы мер. И только пиксель пришел из веба. Однако размер пикселя, который используется в верстке, отличается от обычного.
1in = 6pc = 72pt = 96px
Посмотрите, как выглядит текст в разных абсолютных единицах измерений.
На практике обычно используются пиксели, другие единицы измерений — крайне редко. Например, сантиметр и миллиметр понадобятся, если на сайте есть элемент, который должен распечатываться в строгом размере: бейдж для выставки или почтовый адрес, который вкладывают в карман конверта. Подобные задачи могут встретиться пару раз в жизни.
Относительные единицы
Процент берется от различных свойств. 1% всегда равен 1/100 родительского элемента.
Viewport — область просмотра, т.е. та часть окна браузера, которая доступна пользователю. У браузера есть техническая часть: адресная строка, открытые вкладки, виджеты — они не входят. Но в viewport входят полосы прокрутки.
1vw = 1/100 ширины окна браузера
1vh = 1/100 высоты окна браузера
1vmin = меньшее из значений 1vw и 1vh.
1vmax = большее из значений 1vw и 1vh
Поддерживается не всеми браузерами. Проверяйте с помощью ресурса Can I Use.
Иногда возникает путаница при выборе «проценты или viewport». Размер в процентах будет считаться от размера контейнера, а viewport — от области просмотра экрана. Допустим, вы установили значение 10vw. Тогда на экране с шириной 800px размер составит 80px.
Единицы измерения — Основы вёрстки контента
В прошлых уроках вы уже узнали о единицах измерения px. Можно заметить, что стоит указать где-то 20px и это значение будет зафиксировано. Неважно что вокруг элемента с таким значением, какое разрешение экрана или какое устройство используется. 20 пикселей всегда будут 20 пикселей.
Пиксель является абсолютной единицей измерения. Как уже было сказано выше, такая единица измерения строго фиксирована и не меняется от внешних факторов. Изменить размер можно только переопределением.
В противовес абсолютным единицам измерения существуют относительные единицы измерения. По их названию видно, что они зависят «от чего-то». А вот от чего они зависят мы рассмотрим в конце урока.
В этом уроке будут рассмотрены все основные единицы измерения. На самом деле их достаточно много, но не все используются постоянно. Если у вас возникнет желание познакомиться со всеми доступными единицами измерения, то в конце урока будет ссылка на официальную спецификацию.
Абсолютные единицы
Абсолютные единицы измерения можно считать самыми простыми. Достаточно получить немного опыта и вы уже на глаз сможете определять, какой размер имеет тот или иной элемент внутри документа.
Самой распространённой единицей является пиксель. С ней вы уже знакомы по другим урокам. Но что же такое пиксель? Если не вдаваться в электронику, то пиксель — это всего лишь минимальный элемент, из которого состоит изображение на экране. Значит, мы указываем, сколько таких элементов должно быть занято на экране устройства.
При этом стоит понимать, что 100 пикселей на одном экране могут быть не равны 100 пикселям на другом экране. Всё зависит от размера пикселей в мониторе. А это, в свою очередь, зависит от характеристик экрана и его разрешения.
По этим причинам можно назвать пиксель как относительной, так и абсолютной единицей измерения. Всё зависит от того, с какой точки зрения мы смотрим. Для нас важен пиксель в контексте CSS, где он является абсолютной единицей.
Другие абсолютные единицы почти не используются в разработке для веб-устройств. Стоит их перечислить, но есть вероятность, что вы никогда не будете их использовать.
Заметьте, что среди этих единиц есть знакомые в реальной жизни. При вёрстке для печати это может быть полезно.
Относительные единицы
Самая запутанная часть урока. Относительные единицы берут своё значение от других значений. Самой универсальной такой единицей являются проценты. Они всегда берут свои значения от ближайшего родительского элемента. Остальные единицы можно разделить на две группы:
Проценты
Как уже было сказано, проценты рассчитываются от значения того же свойства ближайшего родителя. Родитель — элемент, внутри которого находится текущий блок. Например:
Рассмотрим на примере ширины и размера шрифта.
Что же здесь происходит? Разберёмся по шагам:
Интересным примером является установка процентов для тега или класса, который предполагает вложение друг в друга. Взгляните на следующий пример:
Перед тем, как идти дальше, попробуйте проанализировать эту разметку и посчитать, какие размеры шрифта будут у каждого элемента списка. Не пугайтесь, если вы запутаетесь. Это может быть сложно.
Поразмыслили? Молодцы! Теперь посмотрим, как это выглядит:
Относительные единицы, рассчитывающиеся от размера шрифта
Выдохните — самое сложное уже позади. Если вы внимательно изучили работу процентов, то другие относительные единицы не вызовут сложностей. Есть две основные относительные единицы измерения, которые зависят от размера шрифта: em и rem.
Тогда в чём смысл em? Эту единицу измерения можно использовать не только для шрифта, но и для любых других свойств, которые принимают числовое значение. Например, в следующем коде размер нижнего внешнего отступа будет 60px:
Вернёмся к примеру со списком. Заменив em на rem получим совершенно другой результат. 0.7rem высчитываются из одного и того же места, без учёта вложенности. Итого, каждый элемент будет иметь размер шрифта 11.2px. Это связано со стандартным значением размера шрифта в 16 пикселей у большинства браузеров.
Вы можете заметить, что размер шрифта в 30 пикселей у элемента
- не играет, в данном случае, никакой роли.
Относительные единицы, рассчитывающиеся от размера экрана
CSS позволяет задавать размеры относительно текущего размера viewport — размера окна браузера, доступного без прокрутки. Основными двумя единицами являются vw — ширина viewport и vh — высота viewport. Вы можете рассматривать это как процент от размера viewport.
Частый «кейс» с использованием таких единиц — создание секции на всю доступную область браузера.
Попробуйте изменять размер окна браузера с примером из CodePen. Какую бы ширину вы не ставили, размер секции будет автоматически меняться. Следовательно, горизонтальная или вертикальная прокрутка никогда не появится.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.