Jednostka miary REM w CSS - ogólne informacje i metody aplikacji

W regułach CSS stosuje się dwa warianty jednostek miary: bezwzględny i względny. Początkowo znana była tylko jedna bezwzględna jednostka miary - piksel. Jego rozmiar zależał od matrycy lub monitora i łatwo było go obliczyć samodzielnie.

Wady korzystania z pikseli

Dla wydawców pracujących nad mediami, na stronie ważne jest wyróżnienie samej treści. Powinien być czytelny, z optymalną długością linii i wystarczającą wielkością, aby nawet użytkownik o niskiej widoczności mógł wygodnie odbierać tekst. Nie ma znaczenia, które urządzenie czyta użytkownik i jakie to dobre - ważne jest, aby zrozumiał treść artykułu bez specjalnych gadżetów. Podczas korzystania z pikseli w układzie powiększanie często powoduje, że liczba słów w linii maleje, występują niezgrabne przejścia tekstowe lub w ogóle treść znika z kontenera. Dlatego twórcy stron internetowych i projektanci zaczęli używać podczas pisania procentów kodu i względnych jednostek miary, takich jak EM, REM. Ale nadal nie mogły całkowicie wypchnąć pikseli.


Historia pojawiania się jednostek względnych

Ponieważ pierwsze strony w większości przeglądarek nie były skalowane, piksele przez długi czas pozostały jedyną opcją do opisania rozmiaru czcionek. Jednak wraz z rozwojem technologii internetowych pojawiła się potrzeba tworzenia nowych jednostek miar. Tak więc istniały EM i%, a następnie REM, których wartości były powiązane ze standardami przeglądarki i zwykle były równe16 pikseli Istnieje zasada empiryczna, która łączy podstawowe rozmiary czcionek: 100% = 1 em ~ 16px ~ 14pt. Oznacza to, że jeśli nie zmienisz rozmiaru czcionki w elementach potomnych, domyślnie w przeglądarce będzie to około 16 pikseli i około 14 punktów (punkt typograficzny), ale zawsze 100% i 1 em.


Użycie względnych jednostek miary ułatwiło układ, czyniąc elementy modułowe łatwiejszymi w zarządzaniu. Nowoczesna technologia wymaga, aby podczas skalowania elementy na stronach różniły się rozmiarem w zależności od ekranu uprawnień lub okna przeglądarki użytkownika. Dlatego EM i REM w CSS stały się nieodzownym pomocnikiem do tworzenia witryn wymagających adaptacyjnych rozmiarów czcionek. Obecnie większość przeglądarek nie ma problemów ze skalowaniem tekstu, a ich zachowanie przy zwiększaniu lub zmniejszaniu rozmiaru czcionki jest zgodne. Jednak każdy układ powinien być sprawdzany w kilku przeglądarkach, w tym przestarzałych, aby zrozumieć, jak będą wyglądały wyniki końcowe dla różnych użytkowników.

Wykorzystanie względnych jednostek

Względne jednostki miary, tak powszechne w typografii i CSS, - EM i REM, są mniej znane przeciętnym użytkownikom niż piksele. Nie każdy początkujący projektant lub projektant rozumie ich cel i używa go poprawnie. Pomiędzy profesjonalnymi projektantami wciąż istnieją spory, kiedy lepiej jest korzystać z jednej lub drugiej jednostki. Niemniej jednak, względne jednostki znacznie ułatwiają wrażliwy układ i są uważane za najbardziej efektywną metodę w budowie modułowych komponentów. EM i REMsłużą do określenia rozmiaru różnych elementów - nagłówków, ramek, ramek. Ale ich rozmiary są obliczane inaczej.

Co to jest EM

EM to względna jednostka miary, która zależy od rozmiaru czcionki elementu nadrzędnego. Często jest to określone w regule CSS dla znacznika body. Ten znacznik określa parametry wszystkich elementów na stronie. Jak zrozumieć jednostki EM w CSS i obliczyć ich wartości? Wszystko jest całkiem proste. Jeśli rozmiar czcionki (czyli rozmiar czcionki) selektora ciała wynosi 10 pikseli, 1 EM to także 10 pikseli, to znaczy, że ustawiający sam określa wartość tego urządzenia. W rezultacie wszystkie pozostałe wymiary podane w EM będą obliczane na podstawie tej wartości. Teksty, których parametry są ustawione w pikselach i w jednostkach względnych, mogą się różnić wizualnie, dopóki nie zostaną zmienione. Ale są one bardzo wygodne przy tworzeniu elastycznych bloków modułowych. Jeśli nie ustawisz rozmiaru czcionki, ale użyjesz jednostek względnych w kodzie, zostaną one obliczone domyślnie, a 1 EM będzie 16 pikseli.

Cechy jednostki miary EM

Jest inna cecha przy stosowaniu względnych jednostek miary EM. Jeśli rozmiar czcionki jest ustawiony na 2 EM w selektorze, to podczas używania EM w parametrach dla innej właściwości w tym samym selektorze, wartość tej jednostki będzie używana inaczej. W rezultacie rozmiar elementu jest podwojony. Parametry EM są obliczane na podstawie rozmiaru czcionki w konkretnym bloku. Oznacza to, że jeśli rozmiar czcionki selektora akapitu (tag "p") jest równy 2 EM, a dlaciało, to jest 10 pikseli, a następnie dodając do selektora p rozmiar zewnętrznego marginesu tekstu ("marginesu") w grubości 1 EM będzie równy 10 i 20 pikseli.
Aby uzyskać rozmiar czcionki równy 10 pikseli, należy użyć wartości 05 EM. Takie zmiany wartości w różnych częściach kodu są często mylone przez początkujących rzemieślników. Wystąpił również problem z używaniem EM w CSS - przy ustawianiu rozmiaru czcionki 0875 EM każdy kolejny dołączony element był pomniejszony. Niepożądane skutki spowodowały użycie tej jednostki i margines-dół. W tym przypadku rozmiar czcionek wpłynął na pola wokół elementu, jak w EM bezpośrednio związany z tym parametrem modelu bloku.

Pomiary REM w CSS

Teraz spójrzmy na to, czym jest jednostka pomiarowa REM i jak z niej korzystać. Pierwsza wzmianka o REM pojawiła się w 2011 roku w komentarzu do artykułu niemieckiego programisty Gerrit van Aaken na temat wykorzystania pikseli w kodzie CSS. Ta względna jednostka jest zbliżona do wartości EM, a jej nazwa jest tłumaczona jako "root EM" lub "Root Em". Zachowanie REM jest bardziej przewidywalne. Użycie tego urządzenia w układzie ułatwia obliczenie rozmiaru elementów w różnych częściach kodu, ponieważ REM w CSS jest równy wartości rozmiaru czcionki ustawionej dla elementu głównego, znacznika HTML. Ale częściej ta wartość jest dodawana w treści, aby wykluczyć błędy obliczeniowe. Używanie REM w CSS, jeśli jego wartość nie jest zapisana w znaczniku HTML, jest jeszcze łatwiejsze. 1 REM będzie równy standardowym 16 pikselom, tak jak w przypadku EM, którego wartość nie jest ustawiona.

Spory dotycząceużyj REM w CSS. REM vs. EM

REM i EM mają swoje plusy i minusy. Istnieje wiele kontrowersji wśród handlerów, która względna jednostka miary ma zastosowanie przy pisaniu kodu. Uważa się, że użycie REM w CSS sprawia, że ​​układ jest mniej modułowy, a EM komplikuje układ i wymaga starannego podejścia i obliczeń. Każdy instalator w trakcie pracy samodzielnie sam wybiera, którą jednostkę miary i gdzie należy złożyć wniosek. Ale na początkowym etapie piksele są jeszcze lepsze. Wartość EM jest lepsza dla elementów, których właściwości są skalowane w oparciu o rozmiar czcionki. W innych przypadkach lepiej nadaje się REM.

Używanie REM w nagłówkach

Zastanówmy się, jak zmienią się nagłówki tekstowe (tagi h1-h6), jeśli są napisane w REM. Załóżmy, że nagłówek zawiera pola wokół niego - dopełnienie, tło i określony rozmiar czcionki. Jeśli chcesz zwiększyć tytuł, spacja między krawędziami elementu zostanie zmniejszona, więc dopełnienie będzie musiało zostać pokonane. Ale jest też problem z tym, że wszystkie elementy po prostu przestają być zawarte na stronie. Ale jest ustawiony rozmiar czcionki w pikselach, a następnie w ustawieniach przeglądarki spróbuj zmienić ją na większą, nic się nie wydarzy. Używając REM, zwiększa się i zmniejsza w zależności od preferencji użytkownika.

Ograniczenia dotyczące root roota

REM pomaga tworzyć kaskadowe tabele o różnych rozmiarach czcionki dla nagłówków i akapitów. Znacznie upraszcza to układ, ponieważ nie jest konieczna całkowita zmiana kodu - wystarczy poprawić rozmiar czcionki w znaczniku HTML. Istnieje również ograniczenie korzystania z tego urządzenia. W starszych wersjach przeglądarek Opera i IE oraz wniektóre przeglądarki systemu Android nadal nie są obsługiwane. Dlatego programiści są zmuszeni do używania pikseli jako opcji kopii zapasowej i pisania podwójnego kodu. Nowoczesne przeglądarki odczyta linię rozmiar tekstu w pikselach, i przekształcić je w REM, nieaktualne i nie tylko zobaczyć je z nieznanych jednostek kodowych. Ale jeśli zapomnieć o nim i rozpocząć projektowanie specyficzne miejsce pod ekranem, można stracić dużo ludzi, którzy po prostu nie może zaakceptować treść dzięki zastosowaniu łamanego lub REM EM.

Nowe sposoby określania rozmiaru tekstu

Lista rozmiarów CSS obejmuje teraz nie tylko opcje wymienione powyżej. Pojawiły się nowe przedmioty:
  • VW - równa 1/100 szerokości przeglądarki.
  • VMIN - 1/100 mniejszej strony okna przeglądarki.
  • VMAX - 1/100 po większej stronie okna przeglądarki.
  • VH - równa 1/100 długości przeglądarki.
  • EX - w zależności od wysokości litery "x" w małymi literami.
  • CH - jest obliczana w zależności od symbolu "0" w czcionce bieżącego elementu.
  • Większość z tych opcji, które są również wykorzystywane do projektowania stron z której wielkość pojemnika jest mierzona zgodnie z rozmiarem okna przeglądarki, elastyczny układ. Ale dla wygodnego skalowania strona zwykle wystarcza EM lub REM.

    Powiązane publikacje