Kaskadowe arkusze stylów, czyli CSS, to kluczowy element w tworzeniu interfejsów użytkownika dla aplikacji internetowych, mobilnych i desktopowych. Dzięki różnorodności dostępnych właściwości i wartości, nadawanie unikalnego wyglądu aplikacjom staje się proste i elastyczne. Jedną z często spotykanych wartości jest REM, która odgrywa istotną rolę w stylizacji stron internetowych.
W tym artykule zgłębimy tajniki jednostki REM w CSS, omówimy znaczenie elastycznej typografii w projektowaniu stron internetowych, przeanalizujemy sposób obliczania jednostek REM oraz przedstawimy korzyści wynikające z ich stosowania.
Czym jest REM w CSS?
REM, czyli Root-EM, to jednostka miary, która określa wielkość czcionki elementu w odniesieniu do rozmiaru czcionki elementu głównego (root). Jako jednostka względna, REM powoduje, że wszystkie wartości, które jej używają, automatycznie dostosowują się do zmian rozmiaru czcionki elementu głównego. Przeglądarki internetowe zazwyczaj domyślnie ustawiają rozmiar czcionki na 16 pikseli, co oznacza, że przy takiej wartości elementu głównego, 1 REM będzie równe 16 pikselom.
Jednostki REM stanowią przeciwieństwo jednostek absolutnych, takich jak piksele. Przykładowo, rozważmy następujący fragment kodu:
<div>Witaj Świecie</div>
A oto stylizacja tego elementu:
div { border: 1.5px solid black; width: 200px; }
Szerokość bloku, ustawiona na 200 pikseli, pozostanie niezmienna, niezależnie od tego, czy ekran będzie większy, czy mniejszy. Ta szerokość jest niezależna od struktury HTML naszego dokumentu.
Podobna sytuacja dotyczy ramki kontenera, której grubość pozostanie na poziomie 1,5 piksela, bez względu na rozdzielczość ekranu czy otoczenie.
Znaczenie responsywnej typografii w projektowaniu stron internetowych
Responsywna typografia, obejmująca układ tekstu, jego rozmiar i odstępy, ma kluczowe znaczenie dla współczesnego projektowania stron internetowych. Oto kilka powodów, dla których projektanci stron internetowych tak chętnie wdrażają zasady responsywnego projektowania:
- Ulepszone wrażenia użytkownika: Aplikacje, które są intuicyjne i łatwe w nawigacji, przyciągają użytkowników. Dostosowanie aplikacji do różnych rozmiarów ekranu gwarantuje przyjemne i płynne korzystanie.
- Dopasowanie do różnych viewportów: Responsywna typografia automatycznie dostosowuje się do dostępnej przestrzeni, eliminując problem nadmiernie rozciągniętych tekstów na dużych ekranach czy zbyt małych na małych.
- Poprawa czytelności: Dobra strona internetowa powinna być przystępna i czytelna. Inwestycja w responsywną typografię zapewnia, że tekst dopasowuje się do rozmiaru i orientacji ekranu.
- Spójność marki: W miarę rozbudowy kodu źródłowego aplikacji mogą pojawiać się rozbieżności w wyglądzie czcionek. Responsywny projekt gwarantuje spójne podejście do projektowania, niezależnie od rozmiaru ekranu i zachowania użytkownika.
- Integracja z media queries: Responsywna typografia może być połączona z zapytaniami o media, umożliwiając projektantom tworzenie różnych stylów, które dostosowują czcionki w zależności od orientacji i rozmiaru ekranu.
- Większa dostępność: Responsywna typografia stanowi fundament dostępności aplikacji, umożliwiając użytkownikom o różnorodnych potrzebach dostosowanie rozmiaru ekranu i czcionek do ich preferencji.
Jak obliczane są jednostki REM?
Jednostki REM są obliczane na podstawie rozmiaru czcionki elementu <html> (root). Dzięki temu możemy tworzyć spójne i skalowalne projekty, oparte na jednej wartości głównej.
Większość przeglądarek ustawia domyślnie rozmiar czcionki elementu <html> na 16 pikseli, jednak możemy zmienić tę wartość, np. na 10 pikseli, za pomocą CSS:
html { font-size: 10px; }
W takim przypadku 10px = 1 REM.
Poniżej znajduje się przykład kodu HTML, który posłuży do zademonstrowania działania jednostki REM:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Witamy w newsblog.pl</h1> </body> </html>
Powyższy kod nie posiada żadnej stylizacji i zawiera tylko nagłówek H1 z tekstem „Witamy w newsblog.pl”.
Domyślny rozmiar czcionki to 16px, co oznacza, że 1REM = 16px. Po wyrenderowaniu strony otrzymamy nagłówek w standardowym rozmiarze.
Aby zademonstrować działanie REM, dodamy arkusz stylów, styles.css, który połączymy z plikiem Index.html w sekcji <head> dokumentu:
<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
W pliku styles.css umieścimy następujący kod:
html { font-size: 10px; }
W tym przypadku, gdy będziemy definiować wartości REM, będą one odnosiły się do 10 pikseli. W rezultacie rozmiar czcionki naszego nagłówka H1 ulegnie zmniejszeniu, co widać na zrzucie ekranu.
Teraz możemy zmienić rozmiar naszego H1, używając jednostek REM:
h1 { font-size: 3.5rem; /* Równowartość 35 pikseli (3.5rem * 10px = 35px) */ }
Nagłówek H1 stanie się większy i będzie miał 35px, co odpowiada 3.5REM.
Korzyści ze stosowania REM w CSS
Wiele osób jest przyzwyczajonych do używania pikseli (px) i procentów jako jednostek miary w CSS. Dlaczego zatem warto rozważyć użycie jednostek REM? Oto kilka powodów:
- Zwiększona skalowalność: Zmiana rozmiaru czcionki elementu głównego pozwala na skalowanie jednostek REM. Takie podejście ułatwia proporcjonalną zmianę wymiarów. Jednostki REM dostosowują się również do zmian rozmiaru czcionek wprowadzonych przez użytkowników w ustawieniach przeglądarki.
- Łatwość zarządzania: Zmiana wartości rozmiaru czcionki elementu <html> lub <body> powoduje automatyczne dostosowanie jednostek REM. Eliminuje to potrzebę indywidualnej modyfikacji każdego elementu w pliku CSS. Dzięki temu możemy zmienić rozmiar czcionki wszystkich nagłówków H1 za pomocą jednej zmiany.
- Spójny rozmiar: Jednostki REM kontrolują rozmiary czcionek i odstępów, zapewniając spójność rozmiarów czcionek na stronach internetowych w odniesieniu do elementu głównego.
- Responsywny design: Umożliwiają tworzenie projektów, które dopasowują się do różnych rozmiarów ekranów i urządzeń. W połączeniu z media queries, jednostki REM pozwalają na elastyczne dostosowanie rozmiarów czcionek poprzez zmianę rozmiaru czcionki elementu głównego, a pozostałe jednostki proporcjonalnie się do niej dostosują.
CSS REM vs. EM vs. Procenty
Podczas kodowania CSS można spotkać piksele, REM, EM i wartości procentowe. Chociaż wszystkie te jednostki służą do określania rozmiarów czcionek i odstępów, znajdują zastosowanie w różnych scenariuszach i mają różne funkcje. Porównajmy jednostki REM z innymi:
REM kontra EM
Zarówno REM, jak i EM są jednostkami względnymi, co oznacza, że ich wartość zmienia się w zależności od kontekstu. Jednostka REM jest powiązana z rozmiarem czcionki elementu głównego (<html>), natomiast jednostka EM jest powiązana z rozmiarem czcionki elementu nadrzędnego (kontenera). Rozważmy poniższy przykład:
<div class="parent"> <p>To jest element nadrzędny.</p> <div class="child"> <p>To jest element podrzędny.</p> </div> </div>
W tym przypadku jednostki EM możemy zdefiniować w następujący sposób:
.parent { font-size: 1.5em; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; } .child { font-size: 1.2em; color: #333; }
Klasa .parent ma rozmiar czcionki ustawiony na 1.5em. Element .child ma natomiast rozmiar czcionki ustawiony na 1.2em, który jest liczony w odniesieniu do elementu nadrzędnego. Zmiany w rozmiarze czcionki klasy .parent zostaną automatycznie przeniesione na element podrzędny.
REM a procenty
Jednostki procentowe odnoszą się do rozmiaru lub odstępów elementu nadrzędnego. Jeśli elementem nadrzędnym jest <body> z rozmiarem czcionki 16 pikseli, a element podrzędny <p> ma rozmiar czcionki ustawiony na 50%, to jego rozmiar wyniesie 50/100 * 16 = 8 pikseli.
Można to zilustrować za pomocą poniższego kodu:
body { font-size: 16px; } p { font-size: 50%; }
Poniższa tabela podsumowuje relacje między REM, EM i procentami:
| Cecha | REM | EM | Procenty |
| Odnoszą się do | Elementu głównego | Elementu nadrzędnego | Elementu nadrzędnego |
| Dziedziczenie | Od korzenia | Od rodzica | Od rodzica |
| Przypadek użycia | Spójne układy | Względne rozmiary | Responsywne projekty |
| Skalowalność | Tak | Tak | Względne |
Kiedy nie stosować jednostek REM
Jednostki REM, mimo wielu zalet, nie są idealnym rozwiązaniem w każdej sytuacji. Oto kilka przykładów, kiedy ich użycie może być niewłaściwe:
- Drukowanie: W przypadku dokumentów przeznaczonych do druku, preferowane są wartości bezwzględne, takie jak cale czy milimetry, które zapewniają precyzyjną kontrolę nad wymiarami.
- Szczegółowa kontrola: Jeśli rozmiar elementu ma być ściśle powiązany z rozmiarem elementu nadrzędnego, jednostka REM nie będzie optymalna. W takim przypadku lepiej zastosować jednostki bezwzględne lub stałe, np. piksele.
- Animacje i przejścia: Jednostki REM nie są najlepsze do płynnych animacji i przejść. Zmiana rozmiaru czcionki elementu głównego może skutkować nagłymi zmianami w przejściach lub animacjach.
- Starsze przeglądarki: Niektóre starsze przeglądarki mogą nie obsługiwać jednostek REM. W takich przypadkach lepiej użyć procentów lub jednostek opartych na pikselach.
Podsumowanie
Mamy nadzieję, że ten artykuł wyjaśnił, jak działają jednostki REM w CSS, jak je obliczać i kiedy ich używać. Jednostki REM to wartości względne, które pozwalają na stosowanie spójnych rozmiarów czcionek w aplikacjach.
Piksele natomiast są wartościami bezwzględnymi, które nie ulegają zmianie w zależności od rozmiaru viewportu czy otaczających elementów.
Jednostki REM nie są idealne w każdej sytuacji. W niektórych przypadkach lepiej sprawdzają się procenty i piksele.
Zachęcamy do dalszego zgłębiania wiedzy o stylizacji CSS.
Czy artykuł był pomocny?
Dziękujemy za opinię!