rem, em i procenty — CSS

rem zależy od rozmiaru pisma elementu głównego, a em często od rozmiaru pisma bieżącego elementu.

Cel lekcji

Poznać zagadnienie „rem, em i procenty”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Procenty są obliczane w zależności od właściwości i kontenera.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

html { font-size: 16px; }
.card { font-size: 1.25rem; padding: 1em; }

Przeczytaj kod linijka po linijce

html { font-size: 16px; }Określamy rozmiar lub czytelność tekstu.
.card { font-size: 1.25rem; padding: 1em; }Ustawiamy odstępy elementów.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Tekst karty ma 20px, a padding 20px przy tych ustawieniach.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Przetestuj 1.5em wewnątrz karty.