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

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

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

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

width: 22ex;

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

  

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

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

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

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

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

74 голоса | спросил Joel 28 Mayam09 2009, 04:21:35

5 ответов


0

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

альтернативный текст


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

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

ответил Rex M 28 Mayam09 2009, 04:26:17
0

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

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
ответил jbs 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowSun, 14 Sep 2014 05:03:31 +0400 2014, 05:03:31
0

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

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

и бывший с прокладка внизу: 2 отл .; padding-top: 2 ex;

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

ответил 9 J0000006Europe/Moscow 2009, 00:05:04
0

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

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

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

ответил AmbroseChapel 28 Mayam09 2009, 06:14:55
0

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

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

ответил Yì Yáng 17 Mayam14 2014, 07:29:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132