Какова стоимость единицы "экс" css?
(Не путать с Xunit, популярной библиотекой модульного тестирования.Net.)
Сегодня в приступе скуки я начал проверять DOM в Gmail (да, мне было очень скучно).
Все выглядело довольно просто, пока я не заметил интересную спецификацию по ширине определенных элементов. Прославленные гуглиты указали несколько столбцов таблицы, используя редкую "бывшую" единицу.
width: 22ex;
Сначала я был в замешательстве ("что такое" бывший "?"), Затем он вернулся ко мне: я, кажется, кое-что вспомнил много лет назад, когда я впервые узнал о CSS. Из спецификации CSS3:
[ Единица ex ] равна используемой высоте x первого доступного шрифта. Высота x называется так, потому что она часто равна высоте строчной буквы "x". Тем не менее, "ex" определено даже для шрифтов, которые не содержат "x".
Ну и хорошо. Но я никогда не видел, чтобы он использовался раньше (а тем более использовал его сам). Я использую ems довольно часто и ценю их ценность, но почему "бывшие"? Измерение кажется гораздо менее стандартным, чем их, и гораздо менее полезным.
Одна из немногих страниц, на которых я нашел обсуждение этой темы, - это http://www.xs4all.nl/~sbpoley/webmatters/emex.html Стивена Поули. Стивен делает хорошие замечания, однако его обсуждение кажется мне неубедительным.
Итак, мой вопрос: какую ценность "бывшая" единица придает веб-дизайну?
(Этот вопрос может быть помечен как субъективный, но я оставлю это решение более опытным SO, чем мне.)
6 ответов
Это полезно, когда вы хотите изменить размер относительно высоты строчных букв вашего текста. Например, представьте, что работаете над дизайном, например, так:
В типографском измерении высота букв имеет важные пространственные связи с остальными элементами. Линии на исходном изображении выше предназначены для того, чтобы помочь указать высоту x текста, но они также показывают, где будут руководящие указания при проектировании вокруг этого текста.
Как отметил Джонатан в комментариях, ex - это просто версия em (width) по высоте.
Чтобы ответить на вопрос, одно использование с верхним и нижним индексом. Пример:
sup {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
bottom: 1ex;
}
Еще одна вещь, которую стоит рассмотреть, это то, как ваша страница масштабируется, когда пользователь увеличивает или уменьшает размер шрифта (возможно, с помощью ctrl+ колесико мыши (окна)).
Я использовал их с.. padding-left: 2 em; padding-right: 2 em;
и бывший с отступом-дном: 2 бывший; padding-top: 2 отл.;
Таким образом, используется вертикальная единица измерения для свойства вертикального масштабирования и горизонтальная единица измерения для свойства горизонтального масштабирования.
Обратите внимание, что такие термины, как "одинарный / двойной интервал между строками", на самом деле означают смещение между двумя смежными строками, измеренное em. Таким образом, "двойной межстрочный интервал" означает, что каждая строка имеет высоту 2 em.
Поэтому, если вы хотите указать вертикальное расстояние, пропорциональное "линиям", используйте em. Используйте ex только в том случае, если вам нужна фактическая высота строчной буквы, что, я бы сказал, является более редким случаем.
Значение наличия этого в спецификации CSS, если это то, что вы действительно спрашиваете, точно такое же, как значение наличия модуля em.
Это позволяет вам устанавливать шрифты в относительных размерах.
Вы не знаете, какой у меня базовый размер шрифта. Таким образом, одна хорошая стратегия для веб-дизайна - устанавливать размеры шрифтов относительно, а не абсолютно; эквивалент "удвоить ваш нормальный размер" или "немного меньше вашего нормального размера", а не фиксированный размер, как "десять пикселей".
Для фактического значения в пикселяхgetComputedStyle
есть на помощь.
Например, на моей обработке,
(Chrome на macOs — шрифт по умолчанию)1ex == 7.2px
(Chrome на macOs — шрифт «system-ui»)1ex == 8.4px