Zawartość
- Używanie ems do zmiany rozmiarów czcionek
- Ale jak duży jest em?
- Pomyśl w pikselach, użyj ems do miary
- Nie zapomnij o dziedziczeniu!
Używanie ems do zmiany rozmiarów czcionek
Podczas tworzenia strony internetowej większość profesjonalistów zaleca rozmiar czcionek (a właściwie wszystko) za pomocą względnych miar, takich jak ems, exs, procenty lub piksele. Wynika to z faktu, że tak naprawdę nie znasz wszystkich różnych sposobów przeglądania treści przez kogoś. A jeśli zastosujesz bezwzględną miarę (cale, centymetry, milimetry, punkty lub piki), może to wpłynąć na wyświetlanie lub czytelność strony w różnych urządzeniach. A W3C zaleca używanie ems do rozmiarów.
Ale jak duży jest em?
Według W3C em:
”jest równa obliczonej wartości właściwości„ font-size ”elementu, na którym jest on używany. Wyjątkiem jest sytuacja, gdy„ em ”występuje w wartości samej właściwości„ font-size ”, w którym to przypadku odnosi się do rozmiaru czcionki elementu nadrzędnego. ”
Innymi słowy, ems nie mają absolutnego rozmiaru. Przyjmują wartości wielkości w zależności od tego, gdzie się znajdują. Dla większości projektantów stron internetowych oznacza to, że są w przeglądarce internetowej, więc czcionka o wysokości 1 m ma dokładnie taki sam rozmiar jak domyślny rozmiar czcionki dla tej przeglądarki.
Ale jak wysoki jest domyślny rozmiar? Nie ma 100% pewności, ponieważ klienci mogą zmienić domyślny rozmiar czcionki w swoich przeglądarkach, ale ponieważ większość ludzi tego nie robi, możesz założyć, że większość przeglądarek ma domyślny rozmiar czcionki 16px. Więc przez większość czasu 1em = 16 pikseli.
Pomyśl w pikselach, użyj ems do miary
Gdy wiesz, że domyślny rozmiar czcionki to 16 pikseli, możesz użyć ems, aby umożliwić klientom łatwą zmianę rozmiaru strony, ale możesz myśleć w rozmiarach w pikselach. Załóżmy, że masz strukturę określania wielkości:
- Nagłówek 1 - 20px
- Nagłówek 2 - 18px
- Nagłówek 3 - 16px
- Tekst główny - 14 pikseli
- Podtekst - 12 pikseli
- Przypisy - 10 pikseli
Możesz zdefiniować je w ten sposób, używając pikseli do pomiaru, ale wtedy każdy, kto używa IE 6 i 7, nie byłby w stanie dobrze zmienić rozmiaru strony. Powinieneś więc przekonwertować rozmiary na ems, a to tylko kwestia matematyki:
- Nagłówek 1 - 1,25 em (16 x 1,25 = 20)
- Nagłówek 2 - 1.125 em (16 × 1,125 = 18)
- Nagłówek 3 - 1em (1em = 16px)
- Tekst główny - 0,875 em (16 x 0,875 = 14)
- Podtekst - 0,75 em (16 x 0,75 = 12)
- Przypisy - 0,625 em (16 x 0,625 = 10)
Nie zapomnij o dziedziczeniu!
Ale to nie wszystko dla nich. Inną rzeczą, o której musisz pamiętać, jest to, że przybierają rozmiar rodzica. Jeśli więc zagnieżdżasz elementy o różnych rozmiarach czcionek, możesz uzyskać czcionkę znacznie mniejszą lub większą niż się spodziewasz.
Na przykład możesz mieć arkusz stylów taki jak ten:
Spowodowałoby to czcionki o wielkości 14px i 10px odpowiednio dla tekstu głównego i przypisów dolnych. Ale jeśli wstawisz przypis do akapitu, możesz otrzymać tekst o rozmiarze 8,75 pikseli zamiast 10 pikseli. Wypróbuj sam, umieść powyższy CSS i następujący HTML w dokumencie:
Tak więc, gdy używasz ems, musisz być bardzo świadomy rozmiarów obiektów nadrzędnych, w przeciwnym razie na twojej stronie pojawią się naprawdę nieparzyste elementy.
