Jeśli otworzysz arkusz stylów witryny, natkniesz się na rem, em, piksele lub dowolną ich kombinację. W stylach CSS są to główne jednostki miary, które są używane. Niezależnie od tego, czy projektujesz witrynę od zera, czy też „odziedziczyłeś” wcześniej zaprojektowaną witrynę, którą musisz utrzymywać, są to ważne dla typografii, odstępów i innych rozmiarów w projekcie wizualnym.

Co sprawia, że ​​jedna jednostka miary jest lepsza od drugiej? Nie ma jednoznacznej odpowiedzi iw zależności od sytuacji, jeden może być lepszy od drugiego. Znajomość przypadku użycia i tego, co sprawdzi się najlepiej, pomoże określić najlepszy pomiar dla Twojej stylizacji.

Piksele

Od początków internetu piksele były opcją, którą można znaleźć wszędzie w arkuszach stylów. Są niezawodne, precyzyjne, a ich konsystencja nie ma sobie równych. Piksele są obsługiwane we wszystkich przeglądarkach, co ułatwia pracę z nimi.

Chociaż piksele są świetne, mają pewne ograniczenia. Ponieważ są tak ustawionym wymiarem, użytkownicy nie mogą zmienić rozmiaru domyślnego tekstu przeglądarki w ustawieniach przeglądarki. Rzeczy nie skalują się tak, jak w przypadku emów i remów, co utrudnia użytkownikowi zmianę rozmiaru z punktu widzenia dostępności. Można argumentować, że użytkownik może po prostu powiększyć, zamiast wchodzić w ustawienia przeglądarki. Nie ma jednej dobrej lub złej odpowiedzi, należy o tym pamiętać.

Czym oni są?

Piksele to jednostka miary oparta na rozmiarze zestawu. Są jednostką do pomiaru wymiarów na ekranie i są używane, gdy wymagane jest precyzyjne projektowanie. Mówimy takie rzeczy jak „rozdzielczość pikseli”, więc jesteśmy przyzwyczajeni do tego pomiaru.

Przykład wyglądałby mniej więcej tak:

.main-header p {
font-size: 14px;
}

Piksele mają swoje zastosowanie w projektowaniu stron internetowych, ale w erze projektowania stron internetowych niezależnych od urządzeń pomiary ekranu nie są głównym celem. Chodzi o to, jak najlepiej dopasować nasze treści na niezliczonych urządzeniach, więc istnieją em i rem, które mogą w tym pomóc.

Ems

Ta jednostka miary ma długą historię. Wraca do 1996 roku i istnieje od początków CSS. Piksele były uważane za najlepszą praktykę, więc ems nie były tak popularne w tamtych czasach. Od tego czasu zyskały popularność, ponieważ ich celem jest służenie jako jednostka zależna od rozmiaru czcionki w określonej treści i pomagają zachować spójność.

Czym oni są?

Jeśli interesujesz się klasyczną typografią, prawdopodobnie rozpoznałeś „em”, ponieważ jest to jednostka miary wywodząca się ze świata drukowanych czcionek. Używając tego jako jednostki w typografii, ten pomiar jest równy aktualnie określonemu rozmiarowi punktu. Na przykład jeden em w 16-punktowym kroju pisma to 16 punktów. Ta jednostka jest taka sama dla wszystkich krojów pisma o danej wielkości w punktach.

Nie mówimy tutaj o druku, więc jak ems wpisują się w projektowanie stron internetowych? Relatywna wielkość jest dużym atutem ems, ponieważ pomaga kontrolować wielkość elementów w odniesieniu do innych. Emy mogą pełnić funkcję świetnych elementów konstrukcyjnych dla elementów strony internetowej ze względu na fakt, że wartości em są złożone. Ważne jest jednak, aby naprawdę zrozumieć, jak działa ta mieszanka.

Zrozumieć ems

W większości przypadków, o ile domyślna przeglądarka nie jest ustawiona na coś innego, em ma 16 pikseli. Kiedy zobaczysz 1,5 em, będzie to 24 piksele. Jednak nie zawsze jest to takie proste. Co się dzieje, gdy w grę wchodzi zagnieżdżanie? Może to być zarówno wygodne, jak i mylące. Wiedza o tym, jak działają rzeczy podczas pracy z emami, z pewnością pomoże rozwiązać każdą zagadkę. Jaki jest rozmiar akapitu „Jestem zagnieżdżony” poniżej?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Są tu trzy divy, a akapit jest dość zagnieżdżony. Z kaskadą DOM, być może będziesz musiał wykonać jakąś pracę detektywistyczną. Powiedzmy, że pracujemy z em 16px, ponieważ jest to najczęstsze.

Klasa .one mnoży 1em przez 0,5, czyli 0,5 em lub 8 pikseli. W przypadku klasy .two jest to po raz kolejny pomnożenie przez 0,5, czyli 0,25 em lub 4 piksele. Sprawy stają się dość małe, więc klasa .three pomoże. Weźmiemy .25 em i pomnożymy to przez 2. Wynik to 0.5 em lub 8px.

Jedną rzeczą, która może pomóc, jest ustawienie rozmiaru elementu HTML. Coś takiego określi ustawiony rozmiar em, zamiast polegać na em ustawionym przez przeglądarkę. Ustawmy 1 em na 20px. Gdyby użyto tego w powyższym przykładzie, miałyby zastosowanie te same zasady z zagnieżdżaniem. Pamiętaj jednak, że określiliśmy rozmiar w pikselach, co wpłynie na możliwość skalowania tekstu za pomocą opcji ustawień przeglądarki.

html {

font-size: 20px;

}

Oprócz pikseli rozmiar czcionki można również ustawić procentowo. Chodzi o to, że ems mogą działać razem z innymi jednostkami miary. Na pewno się z tym spotkasz, ponieważ dość często ustawia się czcionkę treści na wartość procentową, aby pomóc ustawić linię bazową. Załóżmy, że rozmiar czcionki zaczyna się od 62,5% rozmiaru em. Przy rozmiarze em 16px rozmiar czcionki będzie wynosił 10px.

body {

font-size:62.5%;

}

Gdy już zrozumiesz, ems może być dobrym atutem twojego projektu. Dopasowanie tekstu elementów podrzędnych do ich elementów nadrzędnych z pewnością może się przydać. Ponadto ems ułatwiają określenie większego wypełnienia w kontenerze tekstu niż to, co można znaleźć w odstępach między wyrazami, dzięki czemu jest on zgodny z wizualną zasadą bliskości. Powiązane elementy zostaną pogrupowane wizualnie, z mniejszym bałaganem i zapewnią uporządkowany układ.

Kolejną wielką cechą ems są zalety dostępności. Ponieważ jest powiązany z korzeniem DOM, ems czyni go idealnym do zmiany rozmiaru całego projektu w oparciu o preferencje użytkownika. W preferencjach przeglądarki można łatwo zmienić domyślną wielkość czcionki, która następnie zmienia obliczenia w ems na całą stronę.

Rems

Czym oni są?

Rems to całkiem nowy dodatek do osi czasu CSS. Ta jednostka miary została wprowadzona w CSS3 i rozwiązuje niektóre problemy z pikselami i emsami. Mając nazwę podobną do „ems”, możesz się zastanawiać, co oznacza „r”. Pochodzi od terminu „Root EM”.

Korzeń to element HTML. Podstawą tego pomiaru jest rozmiar określony w elemencie HTML. Zobaczysz, że użyliśmy rozmiaru em w elemencie HTML; można połączyć te dwa typy pomiarów.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Nowoczesne przeglądarki obsługują rem, ale upewnij się w BrowserStack, jakie starsze przeglądarki musisz obsługiwać, zanim zdecydujesz się na rem. Nie daj się jednak powstrzymać starszym przeglądarkom; zawsze możesz określić rezerwę pikseli dla czegokolwiek poniżej IE9. Nowoczesne przeglądarki ignorują piksele, ponieważ preferują remy. Mogłoby to wyglądać mniej więcej tak:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Zrozumienie rem

Pamiętasz matematykę, którą musieliśmy wykonać dla zagnieżdżonych elementów ems? W przypadku remów to nie jest konieczne. Wszystko opiera się na tym elemencie głównym. Nie musimy się martwić o elementy rodzica, zawsze bazuje na korzeniu.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Są tu trzy divy, a akapit jest dość zagnieżdżony, tak jak widzieliśmy w przykładzie em. Załóżmy, że pracujemy z rozmiarem em 16px.

Klasy .one i .two mają przypisane rozmiary, ale nie mają one tutaj większego znaczenia, ponieważ remy nie mają wpływu na zagnieżdżanie, tak jak w przypadku emów. Wszystko, co naprawdę się liczy, to stylizacja .three, czyli 2 ems. Akapit byłby oparty na elemencie HTML 1em. Ten pomiar zostałby podwojony, co dałoby nam 2 remy lub 32 piksele.

Chcesz równomiernie skalować wszystko? Po prostu dostosuj rozmiar elementu głównego. Jest to również przydatne podczas dostosowywania domyślnego rozmiaru przeglądarki. Możesz zobaczyć, jak pozwalały na to emsy, remy też.

Jest o wiele mniej powodów do zmartwień związanych z nieprzewidywalnymi zachowaniami gniazdowania z remami. Łatwo zrozumieć, gdzie w grę wchodzi pierwiastek i jak wpływa on na twoją stylizację podczas używania remów.

Porównując różne pomiary, widać, że mają one swoje plusy i minusy. Prawdziwe zrozumienie, jak działają jednostki miary i jak działają z ustawieniami przeglądarki, pomoże Ci wybrać, która będzie najlepiej pasować do sytuacji lub projektu.