Jaka jest wartość jednostki css "ex"?

Question

(nie mylić z Xunit, popularne biblioteki .Net testowanie urządzenia).

Dziś w przypływie nudy zacząłem kontroli Gmails DOM (tak, byłem bardzo znudzeni).

Wszystko wyglądało całkiem prosto, dopóki nie zauważyłem interesującej specyfikacji na szerokości niektórych elementów. Znakomici Googlici określili liczbę kolczyków przy użyciu rzadkiej jednostki "ex".

width: 22ex; 

Na początku byłem zakłopotany („Co to jest?«Ex»”), a następnie wrócił do mnie: wydaje mi się, czegoś od lat temu, kiedy pierwszy uczyłem się o CSS. From the CSS3 spec:

[Urządzenie np jest] równa używane x wysokość first available font. Wysokość x jest tak nazywana, ponieważ często jest równa wysokości małej litery "x". Jednak "ex" jest zdefiniowane nawet dla czcionek, które nie zawierają "x".

Dobrze i dobrze. Ale nigdy wcześniej nie widziałem, żeby był używany (o wiele mniej używany). Używam ems dość często i doceniam ich wartość, ale dlaczego "ex"? Wydaje się, że pomiar jest o wiele mniej standardowy niż em, i znacznie mniej użyteczny.

Jedną z niewielu stron, które znalazłem omawiając ten temat jest Stephen Poley's http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen robi jednak dobre punkty, ale jego dyskusja wydaje mi się nieprzekonująca.

Więc moje pytanie brzmi: Jaką wartość jednostka "ex" nadaje do projektowania stron internetowych?

(To pytanie może być znakowany subiektywne, ale zostawię tę decyzję do bardziej doświadczonych SO'ers niż ja).

Answer 1

Jest to przydatne, gdy chcesz coś wielkości w stosunku do wysokości posiadanego małe litery tekstu. Na przykład, wyobraź sobie, pracuje nad projektem tak:

W typograficznego wymiaru projektu, wysokość liter ma ważnych relacji przestrzennych z pozostałymi elementami. Linie na powyższym obrazie źródłowym mają na celu wskazanie wysokości x tekstu, ale pokazują również, gdzie byłyby wytyczne dotyczące projektowania tego tekstu.

Jak zauważył Jonathan w komentarzach, ex jest po prostu wysokościową wersją em (szerokość).

Answer 2

Wartość mająca w specyfikacji CSS,, jeśli o to pytasz, jest dokładnie taka sama jak wartość jednostki em.

Umożliwia ustawienie czcionek o rozmiarach względnych.

Nie wiesz, jaki jest mój podstawowy rozmiar czcionki. Tak więc jedną dobrą strategią projektowania stron internetowych jest ustawienie rozmiarów czcionek, które są względne, a nie bezwzględne; odpowiednik "podwoić swój normalny rozmiar" lub "trochę mniejszy niż normalny rozmiar" niż stały rozmiar, taki jak "dziesięć pikseli".

Answer 3

Inną rzeczą, którą należy rozważyć, jest to, jak twoja strona skaluje się, gdy użytkownik podnosi lub zmniejsza rozmiar czcionki (być może za pomocą ctrl + kółka myszy (Windows)).

Użyłem em z .. padding-left: 2 em; padding-right: 2 em;

i ex z padding-bottom: 2 ex; wyściółka: 2 ex;

Stosując pionową jednostkę miary dla skali pionowej i poziomej jednostki miary dla właściwości skalowania poziomego.

Answer 4

Należy zauważyć, że terminy takie jak "odstęp pojedynczy/podwójny wiersz" w rzeczywistości oznaczają przesunięcie między dwoma sąsiednimi liniami, zmierzone przez em. Tak więc "podwójna interlinia" oznacza, że ​​każda linia ma wysokość 2 em.

Dlatego jeśli chcesz określić odległość w pionie, która jest proporcjonalna do "linii", użyj em. Używaj tylko ex, jeśli chcesz mieć faktyczną wysokość małej litery, co, jak śmiem twierdzić, jest znacznie rzadszą instancją.

Answer 5

Aby odpowiedzieć na pytanie, jednym z nich jest użycie indeksu górnego i dolnego. Przykład:

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