być może pogodziłeś się z użyciem elastycznych jednostek miary, ale nadal możesz nie w pełni zrozumieć, kiedy używać rem I Kiedy używać em. Ten poradnik pomoże Ci to zrozumieć!

zarównoem, jak irem są elastycznymi, skalowalnymi jednostkami, które są tłumaczone przez przeglądarkę na wartości pikseli, w zależności od ustawień rozmiaru czcionki w projekcie. Jeśli użyjesz wartości 1em lub 1rem, może ona przetłumaczyć w przeglądarce jako wszystko z 16px na 160px lub dowolną inną wartość.

On the other hand px values are used by the przeglądarka jak jest, więc 1px będzie zawsze wyświetlany jako dokładnie 1px.

Wypróbuj suwak na tym przykładzie CodePen, aby zobaczyć, jak wartośćrem Iem jednostek może przekładać się na różne wartości pikseli, podczas gdy jawnie ustawionepx jednostki pozostają stałe w rozmiarze:

Duże pytanie

korzystanie z urządzeńem Irem daje nam elastyczność w naszych projektach i możliwość skalowania elementów w górę iw dół, zamiast tkwić w stałych rozmiarach. Możemy wykorzystać tę elastyczność, aby nasze projekty były łatwiejsze do dostosowania podczas tworzenia, bardziej responsywne i aby umożliwić użytkownikom przeglądarek kontrolowanie ogólnej skali witryn w celu uzyskania maksymalnej czytelności.

zarównoem, jak irem jednostki zapewniają tę elastyczność i działają w podobny sposób, więc ważne jest, kiedy powinniśmy używać wartościem I kiedy powinniśmy używać wartościrem?

istotna różnica

różnica międzyem Irem jednostek jest sposób, w jaki przeglądarka określapx wartość, na którą się przekładają. Zrozumienie tej różnicy jest kluczem do określenia, kiedy użyć każdej jednostki.

zaczniemy od omówienia, jakrem Iem jednostki pracują od podstaw, aby upewnić się, że znasz każdy szczegół. Następnie przejdziemy do tego, dlaczego powinieneś używać jednostekem lubrem.

na koniec przyjrzymy się praktycznemu zastosowaniu dokładnie tych elementów typowej konstrukcji, na których należy stosować każdy typ urządzenia.

jak jednostki rem przekładają się na wartości pikseli

przy użyciu jednostekrem rozmiar piksela, na który tłumaczą, zależy od rozmiaru czcionki głównego elementu strony, tj. elementuhtml. Rozmiar czcionki głównej jest mnożony przez dowolną liczbę używaną w jednostcerem.

na przykład rozmiar czcionki elementu głównego16px10rem byłby równy160px, tj. 10 x 16 = 160.

jak jednostki em przekładają się na wartości pikseli

podczas korzystania z em jednostki, wartość piksela, którą otrzymujesz, jest mnożeniem rozmiaru czcionki na elemencie, który jest stylizowane.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

jest to dość powszechne błędne przekonanie, żeem jednostki są względne do rozmiaru czcionki elementu nadrzędnego. W rzeczywistości, zgodnie ze specyfikacją W3, są one względne do rozmiaru czcionki „elementu, na którym są używane”.

rozmiar czcionki elementu nadrzędnego może wpływać naem wartości, ale gdy tak się dzieje, jest to wyłącznie z powodu dziedziczenia. Spójrzmy dlaczego i zobaczmy, jak to działa w działaniu.

wpływ dziedziczenia na jednostki em

praca zem jednostki mogą zacząć być trudne, jeśli chodzi o dziedziczenie, ponieważ każdy element automatycznie dziedziczy rozmiar czcionki swojego rodzica. Efekt dziedziczenia może zostać nadpisany tylko przez jawne ustawienie rozmiaru czcionki z jednostką niepodlegającą dziedziczeniu, na przykład px lub vw.

rozmiar czcionki elementu, na którym używane są jednostkiem określa ich rozmiar. Ale ten element mógł odziedziczyć rozmiar czcionki po rodzicu, który odziedziczył rozmiar czcionki po rodzicu i tak dalej. W związku z tym możliwe jest, aby dowolna wartość em była dokonywana przez rozmiar czcionki dowolnego z jej rodziców.

spójrzmy na przykład. Zachęcamy do wypróbowania tego w CodePen dla siebie, jak krok przez to. W miarę postępów, użyj narzędzi programistycznych Chrome lub Firebug dla Firefoksa, aby sprawdzić wartości pikseli, na które są obliczane jednostki em.

przykład dziedziczenia em

Jeśli mamy stronę z głównym rozmiarem czcionki16px (Zwykle domyślnym) i podrzędny div wewnątrz niego z wypełnieniem1.5em, ten div odziedziczy rozmiar czcionki 16px z głównego elementu. Stąd jego wypełnienie przełoży się na 24px, czyli 1.5 x 16 = 24.

co jeśli owiniemy kolejny div wokół pierwszego i ustawimy jegofont-size na1.25em?

Nasz div wrapper dziedziczy Główny rozmiar czcionki16px I mnoży go przez własnefont-size ustawienie1.25em. Ustawia to div na rozmiar czcionki 20px, tzn. 1.25 x 16 = 20.

teraz nasz oryginalny div nie dziedziczy już bezpośrednio z elementu głównego, zamiast tego dziedziczy rozmiar czcionki20px ze swojego nowego rodzica div. Jego wartość wypełnienia 1.5emjest teraz równa30px, tzn. 1.5 x 20 = 30.

ten efekt skalowania można jeszcze bardziej skomplikować, jeśli dodamyem rozmiar czcionki oparty na naszym oryginalnym div, powiedzmy1.2em.

div dziedziczy rozmiar czcionki20px od swojego rodzica, a następnie mnoży go przez własne ustawienie1.2em, dając mu nowy rozmiar czcionki24px, tzn. 1.2 x 20 = 24.

wypełnienie1.5em na naszym div zmieni teraz Rozmiar ponownie z nowym rozmiarem czcionki, tym razem do36px, czyli 1.5 x 24 = 36.

wreszcie, aby jeszcze bardziej zilustrować, że em jednostki są względne do rozmiaru czcionki elementu, na którym są używane, (nie element nadrzędny), zobaczmy, co stanie się z naszym wypełnieniem 1.5em jeśli jawnie ustawimy div, aby używał rozmiaru czcionki 14px, wartość nie podlega dziedziczeniu.

teraz nasz padding spadł do 21px, czyli 1,5 x 14 = 21. Rozmiar czcionki elementu nadrzędnego nie ma na nią wpływu.

z całym tym potencjałem komplikacji, możesz zobaczyć, dlaczego ważne jest, aby wiedzieć, jak używać jednostekem w łatwy sposób.

wpływ ustawień przeglądarki na rozmiar czcionki elementu HTML

domyślnie przeglądarki mają zwykle rozmiar czcionki 16px, ale można to zmienić w dowolnym miejscu od 9PX do 72px przez użytkownika.

ważne informacje:

główny elementhtml dziedziczy swój rozmiar czcionki z ustawień w przeglądarce, chyba że zostanie nadpisany z wyraźnie ustawioną stałą wartością.

tak więc rozmiar czcionki nahtml element jest tym, co bezpośrednio określarem wartości, że rozmiar czcionki może pochodzić najpierw z ustawień przeglądarki.

w ten sposób ustawienia rozmiaru czcionki przeglądarki mogą wpływać na wartość każdej jednostkirem używanej w projekcie, a także każdej jednostkiem poprzez dziedziczenie.

efekt ustawienia przeglądarki gdy nie jest ustawiony rozmiar czcionki HTML

o ile nie zostanie nadpisany, elementhtml dziedziczy niezależnie od domyślnego ustawienia rozmiaru czcionki w przeglądarce. Na przykład, weźmy witrynę, w której nie ustawiono właściwościfont-size na elemenciehtml.

Jeśli Użytkownik ma swoją przeglądarkę przy domyślnym rozmiarze czcionki 16px, rozmiar czcionki głównej będzie 16px. W narzędziach programistycznych Chrome możesz zobaczyć, co element odziedziczył, zaznaczając opcję Pokaż odziedziczone właściwości w zakładce Obliczanie.

w tym przypadku10rem odpowiada160px, tj. 10 x 16 = 160.

Jeśli użytkownik zwiększy rozmiar czcionki przeglądarki do 18px, rozmiar czcionki głównej staje się 18px. Teraz 10rem tłumaczy się na 180px, czyli 10 x 18 = 180.

efekt ustawienia przeglądarki z rozmiarem czcionki HTML jednostki em

gdyem rozmiar czcionki jest ustawiony nahtml element, wartość piksela, na którą się przekłada, będzie wielokrotnością ustawienia rozmiaru czcionki przeglądarki.

na przykład, jeślihtml element miałfont-size właściwość ustawiona na1.25em, rozmiar czcionki głównej byłby 1,25 razy większy niż rozmiar czcionki przeglądarki.

Jeśli rozmiar czcionki przeglądarki został ustawiony na16px, rozmiar czcionki głównej wypadłby jako20px, tj. 1.25 x 16 = 20.

w tym przypadku 10rem będzie równy 200px, tj. 10 x 20 = 200.

jednak, jeśli rozmiar czcionki przeglądarki został ustawiony na 20px, rozmiar czcionki głównej byłby zamiast tego tłumaczony na 25px, czyli 1,25 x 20 = 25.

teraz 10rem będzie równe 250px, tj. 10 x 25 = 250.

podsumowanie różnicy em vs.rem

To, Do czego sprowadza się to wszystko:

• tłumaczenierem jednostki do pikseli wartość jest określona przez rozmiar czcionki elementuhtml. Na ten rozmiar czcionki ma wpływ dziedziczenie z ustawienia rozmiaru czcionki przeglądarki, chyba że zostanie ono wyraźnie nadpisane jednostką niepodlegającą dziedziczeniu.

• tłumaczenie em jednostek na wartości pikseli jest określane przez rozmiar czcionki elementu, na którym są używane. Na ten rozmiar czcionki ma wpływ dziedziczenie elementów nadrzędnych, chyba że zostanie ono wyraźnie nadpisane jednostką niepodlegającą dziedziczeniu.

dlaczego warto używać jednostek rem:

największą siłą, jaką oferują jednostkirem, jest nie tylko to, że dają spójne rozmiary niezależnie od dziedziczenia elementów. Chodzi raczej o to, że dają nam sposób na to, aby ustawienia rozmiaru czcionki użytkownika wpływały na każdy aspekt układu witryny za pomocą rem jednostek, w których kiedyś używaliśmy px jednostek.

z tego powodu podstawowym celem użycia jednostekrem powinno być upewnienie się, że niezależnie od domyślnego rozmiaru czcionki ustawionego przez użytkownika w przeglądarce, układ dostosuje się do rozmiaru tekstu w nim.

strona może być zaprojektowana początkowo skupiając się na najpopularniejszym domyślnym rozmiarze czcionki przeglądarki 16px.

ale za pomocąrem jednostki, jeśli użytkownik zwiększy ich rozmiar czcionki, integralność układu zostaną zachowane, a tekst nie zostanie zgnieciony w sztywnej przestrzeni przeznaczonej na mniejszy tekst.

a jeśli użytkownik zmniejszy swój rozmiar czcionki, cały układ skaluje się w dół i nie zostanie pozostawiony z małym odrobiną tekstu na pustkowiu białej przestrzeni.

użytkownicy zmieniają ustawienia rozmiaru czcionki z różnych powodów, od napiętego wzroku po wybór optymalnych ustawień dla urządzeń, które mogą znacznie różnić się rozmiarem i odległość oglądania. Dostosowanie tych ustawień pozwala na znacznie lepsze wrażenia użytkownika.

warto wiedzieć:

niektórzy projektanci używająrem układy oparte w połączeniu ze stałympx Jednostkafont-size ustawieniehtml element. Zazwyczaj odbywa się to w taki sposób, że zmiana rozmiaru czcionki w elemencie html może skalować ogólny projekt w górę lub w dół.

zdecydowanie odradzam, gdyż nadpisuje rozmiar czcionki element html dziedziczy z ustawień przeglądarki użytkownika. W związku z tym zapobiega to wpływowi ustawień i usuwa możliwość optymalizacji dla najlepszego oglądania.

Jeśli chcesz zmienić rozmiar czcionki na htmlelement, zrób to z emlub rem wartość jako rozmiar czcionki głównej będzie nadal wielokrotnością ustawienia rozmiaru czcionki przeglądarki użytkownika.

to nadal pozwoli Ci skalować projekt w górę lub w dół, zmieniając rozmiar czcionki elementuhtml, ale zachowasz efekt ustawień przeglądarki użytkownika.

dlaczego warto używać jednostek em

wartość kluczaem jednostki oferują to, że pozwalają na określenie wartości rozmiaru za pomocą rozmiaru czcionki innego niż rozmiar elementuhtml.

z tego powodu podstawowym celem jednostek em powinno być umożliwienie skalowalności w kontekście określonego elementu projektu.

na przykład możesz ustawićpaddingmargin Iline-height wokół elementu menu nawigacyjnego, aby używaćem wartości.

w ten sposób, jeśli zmienisz rozmiar czcionki menu, odstępy wokół elementów menu będą skalowane proporcjonalnie, niezależnie od reszty menu.Układ.

we wcześniejszej sekcji dotyczącej dziedziczenia widziałeś, jak szybko śledziszem jednostki mogą wymknąć się spod kontroli. Z tego powodu zalecam używanie tylko jednostekem, jeśli zidentyfikujesz ich wyraźną potrzebę.

zastosowanie praktyczne

wśród projektantów stron internetowych może toczyć się dyskusja i jestem pewien, że różni ludzie mają różne preferowane podejścia, jednak moja rekomendacja jest następująca.

użyj jednostek em dla:

dowolnego rozmiaru, który powinien być skalowany w zależności od rozmiaru czcionki elementu innego niż główny.

Ogólnie Rzecz Biorąc, jedynym powodem, dla którego musisz użyć em jednostek, jest skalowanie elementu, który nie ma domyślnego rozmiaru czcionki.

zgodnie z powyższym przykładem, komponenty projektu, takie jak elementy menu, przyciski i nagłówki, mogą mieć własne wyraźnie określone rozmiary czcionek. Jeśli zmienisz te rozmiary czcionek, cały komponent ma być proporcjonalnie skalowany.

Typowe właściwości te wytyczne będą miały zastosowanie domarginpaddingwidthheight Iline-height, gdy są używane na elementach z niestandardowym rozmiarem czcionki.

zalecam, aby gdy używasz jednostekem, rozmiar czcionki elementu, na którym są używane, powinien być ustawiony w jednostkachrem, aby zachować skalowalność, ale uniknąć nieporozumień w dziedziczeniu.

zazwyczaj nie używa em jednostek dla rozmiarów czcionek

dość często można zobaczyć em jednostek używanych do rozmiaru czcionki, szczególnie w nagłówkach, jednak sugerowałbym, że projekty są łatwiejsze do zarządzania, jeśli rem jednostki są zwykle używane do rozmiaru czcionki rozmiar.

powodem, dla którego nagłówki często używają jednostekem, jest to, że są one lepszym Wyborem niż jednostkipx, będąc względem zwykłego rozmiaru tekstu. Jednakrem jednostki mogą osiągnąć ten cel równie dobrze. Jeśli zostanie dokonana jakakolwiek korekta rozmiaru czcionki w elemenciehtml, rozmiary nagłówków również będą skalowane.

spróbuj zmienićem rozmiar czcionki nahtml element w tym kodzie, aby zobaczyć na własne oczy:

częściej niż Nie, Nie chcemy, aby nasze rozmiary czcionek skalowały się w oparciu o dowolny element inny niż główny, z nielicznymi wyjątkami.

jednym z przykładów, w którym możemy chciećem w oparciu o rozmiar czcionki, może być rozwijane menu, w którym mamy tekst pozycji menu drugiego poziomu w zależności od rozmiaru czcionki pierwszego poziomu. Innym przykładem może być ikona czcionki używana wewnątrz przycisku, gdzie rozmiar ikony powinien odnosić się do rozmiaru tekstu przycisku.

jednak większość elementów w projektowaniu stron internetowych zwykle nie wymaga tego typu wymagań, więc na ogół będziesz chciał użyć remjednostek do zmiany rozmiaru czcionki, z em jednostek tylko wtedy, gdy jest to szczególnie potrzebne.

użyj jednostek rem dla:

dowolnego rozmiaru, który nie wymagaem jednostek z powodów opisanych powyżej i który powinien być skalowany w zależności od ustawień rozmiaru czcionki przeglądarki.

odpowiada to prawie wszystkim standardowym projektom, w tym większości wysokości, większości szerokości, większości wypełnień, większości marginesów, szerokości ramek, większości rozmiarów czcionek, cieni, w zasadzie prawie każdej części układu.

W skrócie wszystko, co można skalować za pomocą jednostek rem, powinno być.

Wskazówka

podczas tworzenia układów często łatwiej jest myśleć w pikselach, ale wyjście w jednostkachrem.

możesz mieć pixel dorem obliczenia wykonywane automatycznie za pomocą preprocesora takiego jak Stylus / Sass / Less lub postprocesora takiego jak PostCSS z wtyczką PXtoRem.

Alternatywnie możesz użyć PXtoEM, aby ręcznie wykonać konwersję.

Zawsze używajrem zapytań o Media

co ważne, gdy używaszrem jednostek, aby utworzyć jednolicie skalowalny projekt, Twoje zapytania o media powinny również znajdować się w jednostkachrem. Zapewni to, że niezależnie od rozmiaru czcionki przeglądarki użytkownika, zapytania o media odpowiedzą na nie i dostosują układ.

na przykład, jeśli użytkownik skaluje tekst bardzo wysoko, układ może wymagać przystawki z dwóch kolumn do jednej kolumny, tak jak na mniejszym ekranowanym urządzeniu mobilnym.

Jeśli punkty przerwania mają stałą szerokość piksela, tylko inny rozmiar widoku może je wywołać. Jednak w przypadkurem punkty przerwania będą również reagować na różne rozmiary czcionek.

nie używaj em ani rem do:

szerokości wielu kolumn

szerokości kolumn w układzie powinny zazwyczaj wynosić%, aby mogły płynnie pasować do nieprzewidywalnych rozmiarów portów widokowych.

jednak pojedyncze kolumny powinny nadal zawierać wartościrem poprzez ustawieniemax-width.

na przykład:

.container { width: 100%; max-width: 75rem;}

dzięki temu kolumna jest elastyczna i skalowalna, ale nie staje się zbyt szeroka, aby tekst w niej był komfortowo czytelny.

gdy Element powinien być całkowicie Nieskalowalny

w typowym projekcie strony internetowej nie będzie wielu części układu, których nie można zaprojektować pod kątem skalowalności. Jednak od czasu do czasu natkniesz się na elementy, które naprawdę potrzebują jawnych stałych wartości w celu zapobiegania skalowaniu.

warunkiem zastosowania stałych wartości rozmiaru powinno być to, że jeśli dany element byłby skalowany, to by się złamał. To naprawdę nie pojawia się często, więc zanim skusisz się, aby wyrzucić tepx jednostki, zadaj sobie pytanie, czy korzystanie z nich jest absolutną koniecznością.

zakończenie

zróbmy krótkie podsumowanie tego, co omówiliśmy:

• rem Iem jednostki są obliczane w pikselach przez przeglądarkę na podstawie rozmiarów czcionek w projekcie.
• em jednostki są oparte na rozmiarze czcionki elementu, na którym są używane.
• rem jednostki są oparte na rozmiarze czcionki elementuhtml.
• em na jednostki może wpływać dziedziczenie rozmiaru czcionki z dowolnego elementu nadrzędnego

• rem na jednostki może wpływać dziedziczenie rozmiaru czcionki z ustawień czcionki przeglądarki.

• użyj em jednostek do rozmiaru, które powinny być skalowane w zależności od rozmiaru czcionki elementu innego niż główny.
• użyjrem jednostek do rozmiaru, które nie wymagająem jednostek, które powinny być skalowane w zależności od ustawień rozmiaru czcionki przeglądarki.
• użyjrem jednostek, chyba że jesteś pewien, że potrzebujeszem jednostek, w tym rozmiarów czcionek.
• użyjrem jednostek na zapytaniach o media
• nie używajem lubrem w szerokościach układu wielu kolumn – zamiast tego użyj%.
• nie używajemlubrem, jeśli skalowanie nieuchronnie spowodowałoby zerwanie elementu układu.

mam nadzieję, że teraz zbudowałeś solidny i kompletny obraz tego, jak działają urządzeniaem Irem I dzięki temu wiesz, jak najlepiej wykorzystać je w swoich projektach.

zachęcam do wypróbowania wytycznych użytkowania zawartych w tym samouczku dla siebie i cieszyć się w pełni skalowalność i responsywność układów, które pozwolą Ci stworzyć.