Jaka jest Wartość jednostki css 'ex'?

(nie mylić z Xunit , popularną biblioteką do testowania jednostek.Net.)

Dzisiaj w przypływie nudy zacząłem sprawdzać DOM Gmailów (tak, byłem bardzo znudzony).

Wszystko wyglądało dość prosto, dopóki nie zauważyłem interesującej specyfikacji szerokości niektórych elementów. Sławni Googlici określili szereg kolców stołowych za pomocą rzadkiej jednostki "ex".

width: 22ex;

Na początku byłem zdumiony ("co to jest 'ex'?"), potem przyszedł wracając do mnie: wydaje mi się, że pamiętam coś sprzed lat, kiedy po raz pierwszy uczyłem się o CSS. z CSS3 spec:

[Jednostka ex jest] równa użytej wysokości X pierwszej dostępnej CZCIONKI . Wysokość x jest tak zwana, ponieważ często jest równa wysokości małej litery "x". Jednak 'ex' jest zdefiniowany nawet dla czcionek, które nie zawierają "x".

Dobrze i dobrze. Ale nigdy wcześniej nie widziałem go używanego (znacznie mniej używanego siebie). Używam ems dość często i doceniam ich wartość, ale dlaczego "ex"? Wydaje się znacznie mniej standardowy pomiar a niż em i znacznie mniej przydatny.

Jedną z kilku stron, które znalazłem omawiających ten temat jest Stephen Poley http://www.xs4all.nl / ~sbpoley/webmatters/emex.html . Stephen ma dobre punkty, jednak jego dyskusja wydaje mi się niejednoznaczna.

Moje pytanie brzmi: jaką wartość ma Jednostka "ex" w projektowaniu stron internetowych?

(to pytanie może być oznaczony subiektywnie, ale tę decyzję zostawię bardziej doświadczonym SO ' owcom niż ja.)

Author: Rory O'Kane, 2009-05-28
Source

5 answers

Jest to przydatne, gdy chcesz rozmiar czegoś w stosunku do wysokości małych liter Twojego tekstu. Na przykład wyobraź sobie pracę nad takim projektem:

alt text


W typograficznym wymiarze projektowania wysokość liter ma istotne relacje przestrzenne z resztą elementów. Linie na powyższym obrazku źródłowym mają pomóc wskazać wysokość x tekstu, ale pokazują również, jakie wytyczne byłyby, gdyby projektować wokół tego tekst.

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

 127
Author: Rex M,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-08 14:12:18

Aby odpowiedzieć na pytanie, należy użyć indeksu górnego i dolnego. Przykład: 

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
 21
Author: jbs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-14 01:03:31

Kolejną rzeczą, którą należy wziąć pod uwagę, jest skalowanie strony, gdy użytkownik zwiększa lub zmniejsza rozmiar czcionki (być może za pomocą ctrl+kółko myszy (windows)).

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

I ex z padding-bottom: 2 ex; padding-top: 2 ex;

W ten sposób używa się pionowej jednostki miary dla właściwości skalowania pionowego i poziomej jednostki miary dla właściwości skalowania poziomego.

 2
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-06-08 20:05:04

Wartość posiadania go w specyfikacji CSS, jeśli naprawdę o to pytasz, jest dokładnie taka sama jak wartość posiadania jednostki em.

Umożliwia ustawienie czcionek na względne rozmiary.

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

 1
Author: AmbroseChapel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-28 02:14:55

Zauważ, że terminy takie jak" pojedynczy/podwójny odstęp między wierszami " w rzeczywistości oznaczają przesunięcie między dwoma sąsiadującymi liniami, mierzone przez em. Tak więc "podwójny odstęp między wierszami" oznacza, że każda linia ma wysokość 2 em .

Dlatego, jeśli chcesz określić odległość pionową, która jest proporcjonalna do" linii", użyj em. Używaj tylko ex, jeśli chcesz mieć rzeczywistą wysokość małych liter, co jest, śmiem twierdzić, znacznie rzadszą instancją.

UPDATE: Web standard pozwala przeglądarce korzystać z 0.5 em jako ex lub pochodzą z czcionki.

Nie ma jednak sposobu na niezawodne osadzenie informacji "x-height" w czcionce (OpenType lub webfont).

Stąd pierwsza możliwość sprawia, że ex-jednostka jest zbędna, a ta ostatnia nie ma żadnych wiarygodnych środków, aby się wydarzyć. A fakt, że albo jest możliwe, sprawia, że jest jeszcze mniej niezawodny.

Argumentuję więc za brakiem wartości ex-jednostki.

 1
Author: Yì Yáng,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-18 13:10:06