Какова стоимость единицы «экс» css?

Question

(Не путать с Xunit , популярной библиотекой модульного тестирования .Net.)

Сегодня в порыве скуки я начал проверять DOM Gmails (да, мне было очень скучно).

Все выглядело довольно просто, пока я не заметил интересную спецификацию по ширине некоторых элементов. Прославленные гуглиты указали количество столбцов таблицы, используя редкую единицу измерения «ex».

width: 22ex;

Сначала я был озадачен («что такое« бывший »?»), А потом вернулся ко мне: мне кажется, я кое-что вспомнил много лет назад, когда я впервые изучал CSS. Из спецификации CSS3 :

[ ex unit ] равен используемой высоте x первого доступного шрифта . Высота x называется так, потому что она часто равна высоте строчной буквы «x». Тем не менее, «ex» определяется даже для шрифтов, которые не содержат «x».

Ну и хорошо. Но я никогда не видел, чтобы он использовался раньше (тем более использовал его сам). Я использую ems довольно часто и ценю их ценность, но почему «бывшие»? Измерение кажется гораздо менее стандартным, чем em, и гораздо менее полезным.

Одна из немногих страниц, на которых я нашел обсуждение этой темы, - «Стивен Поли» http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Стивен делает хорошие замечания, однако его обсуждение кажется мне неубедительным.

Итак, мой вопрос: Какое значение «бывшая» единица придает веб-дизайну?

(Этот вопрос может быть помечен как субъективный, но я оставлю это решение более опытным SO, чем мне.)

Answer 1

Это полезно, когда вы хотите изменить размер относительно высоты строчных букв вашего текста. Например, представьте, что работаете над дизайном, например, так:

В типографском измерении высота букв имеет важные пространственные отношения с остальными элементами. Линии на исходном изображении выше предназначены для того, чтобы помочь указать высоту x текста, но они также показывают, где будут руководящие указания, если проектировать вокруг этого текста.

Как отметил Джонатан в комментариях, ex - это просто версия em (width) по высоте.

Answer 2

Чтобы ответить на вопрос, можно использовать только верхний и нижний индекс Пример:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Answer 3

Еще одна вещь, которую следует рассмотреть здесь, это то, как ваша страница масштабируется, когда пользователь увеличивает или уменьшает размер шрифта (возможно, с помощью ctrl + колесико мыши (windows)).

Я использовал их с .. отступ слева: 2 часа; padding-right: 2 em;

и бывший с прокладка внизу: 2 отл .; верхняя часть: 2 от;

Таким образом, используя вертикальную единицу измерения для свойства вертикального масштабирования и горизонтальную единицу измерения для свойства горизонтального масштабирования.

Answer 4

Обратите внимание, что такие термины, как "одинарный / двойной интервал между строками", на самом деле означают смещение между двумя соседними линиями, измеренное как em . Таким образом, «двойной межстрочный интервал» означает, что каждая строка имеет высоту 2 em .

Поэтому, если вы хотите указать вертикальное расстояние, пропорциональное «линиям», используйте em. Используйте ex только в том случае, если вам нужна фактическая высота строчной буквы, что, осмелюсь сказать, встречается гораздо реже.

Answer 5

Значение , имеющееся в спецификации CSS, , если это то, что вы на самом деле спрашиваете, точно такое же, как значение единицы em.

Позволяет установить шрифты относительно размеров.

Вы не знаете, какой у меня базовый размер шрифта. Таким образом, одна хорошая стратегия для веб-дизайна - установить размеры шрифтов, которые являются относительными, а не абсолютными; эквивалент «удвоения вашего нормального размера» или «немного меньше вашего нормального размера», а не фиксированного размера, например «десять пикселей».