(Nie mylić z Xunit , popularną biblioteką testów jednostkowych .Net).
Dzisiaj w przypływie nudy zacząłem przeglądać Gmails DOM (tak, bardzo się nudziłem).
Wszystko wyglądało całkiem prosto, dopóki nie zauważyłem interesującej specyfikacji szerokości niektórych elementów. Znani Googlites określili liczbę kolumn tabeli, używając rzadkiej jednostki „ex”.
width: 22ex;
Na początku byłem zaskoczony („co to jest„ ex ”?”), A potem wróciło do mnie: wydaje mi się, że pamiętam coś sprzed lat, kiedy po raz pierwszy uczyłem się CSS. Ze specyfikacji CSS3 :
[Jednostka dawna jest] równa użytej wysokości x pierwszej dostępnej czcionki . Wysokość x jest tak nazywana, ponieważ często jest równa wysokości małej litery „x”. Jednak „ex” jest definiowane nawet dla czcionek, które nie zawierają znaku „x”.
Dobrze i dobrze. Ale tak naprawdę nigdy wcześniej go nie widziałem (a tym bardziej sam go używałem). Używam emsów dość często i doceniam ich wartość, ale dlaczego „ex”? Wydaje się, że jest to pomiar znacznie mniej standardowy niż em i znacznie mniej przydatny.
Jedną z niewielu stron omawiających ten temat jest http://www.xs4all.nl/~sbpoley/webmatters/emex.html Stephena Poleya . Stephen ma rację, jednak jego dyskusja wydaje mi się niejednoznaczna.
Moje pytanie brzmi: jaką wartość przydaje jednostka „ex” projektowaniu stron internetowych?
(To pytanie można oznaczyć jako subiektywne, ale pozostawię tę decyzję bardziej doświadczonym SO niż ja.)
em
jednostka ma nie mierzyć szerokość - mierzy wysokość czcionki.1 em
jest obliczonąfont-size
wartością ifont-size
określa „żądaną wysokość glifów” . Więc zarównoem
iex
zmierz wysokość. (ch
jednak mierzy szerokość.)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; }
źródło
Inną rzeczą do rozważenia jest to, jak twoja strona skaluje się, gdy użytkownik zwiększa lub zmniejsza rozmiar czcionki (na przykład używając ctrl + kółko myszy (okna)).
Użyłem ich z ... padding-left: 2 em; padding-right: 2 em;
i ex z wyściółką na dole: 2 ex; padding-top: 2 ex;
W ten sposób używa się pionowej jednostki miary dla właściwości skalowania w pionie i poziomej jednostki miary dla właściwości skalowania w poziomie.
źródło
ch
dochodzi pozioma jednostka mierząca szerokość cyfry zerowej („0”).Wartość posiadania go w specyfikacji CSS, jeśli o to naprawdę pytasz, jest dokładnie taka sama, jak wartość posiadania jednostki em.
Umożliwia ustawienie czcionek na względne rozmiary.
Nie wiesz, jaki jest mój podstawowy rozmiar czcionki. Tak więc jedną z dobrych strategii projektowania stron internetowych jest ustawienie rozmiarów czcionek, które są względne, a nie bezwzględne; odpowiednik „podwójnego rozmiaru normalnego” lub „trochę mniejszego niż normalny rozmiar” zamiast stałego rozmiaru, takiego jak „dziesięć pikseli”.
źródło
ex
wydaje się być odpowiednikiem.M
. Ale udoskonalony CSSem
. Zobacz Wikipedię .ch
jednostki wymienionej w innej odpowiedzi.Zwróć uwagę, że terminy takie jak „pojedynczy / podwójny odstęp między wierszami” w rzeczywistości oznaczają przesunięcie między dwoma sąsiednimi wierszami, mierzone za pomocą em . Zatem „podwójny odstęp między wierszami” oznacza, że każdy wiersz 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 ex tylko wtedy, gdy chcesz podać rzeczywistą wysokość małej litery, co, jak ośmielę się powiedzieć, jest znacznie rzadszym przypadkiem.
AKTUALIZACJA: Standard sieciowy pozwala przeglądarce na używanie 0.5em jako ex lub wyprowadzania z czcionki.
Jednak nie ma sposobu na niezawodne osadzenie jakichkolwiek informacji o wysokości „x” w czcionce (OpenType lub czcionka internetowa).
W związku z tym pierwsza możliwość sprawia, że była jednostka jest zbędna, a drugiej brakuje jakichkolwiek niezawodnych środków, aby się wydarzyć. A fakt, że jedno i drugie jest możliwe, czyni go jeszcze mniej niezawodnym.
Dlatego argumentuję za brakiem wartości byłej jednostki.
źródło