Jednostki względne
Jednostki względne odgrywają kluczową rolę w tworzeniu responsywnych i dostosowanych do różnych urządzeń witryn. Tradycyjnie stosowane jednostki absolutne, takie jak piksele, mogą prowadzić do problemów związanych z skalowaniem i wyglądem strony na różnych ekranach. W przeciwieństwie do nich, jednostki względne, takie jak em, rem, vw, vh czy %, umożliwiają lepsze dopasowanie elementów strony do różnych rozdzielczości i wielkości ekranów. Jednostki względne umożliwiają na określanie wielkości elementów na stronie, który pozwala na dynamiczne skalowanie rozmiarów w zależności od innych parametrów, takich jak rozmiar okna przeglądarki czy rozmiar czcionki.
Użycie jednostek względnych jest kluczowe dla tworzenia responsywnych stron internetowych, które dostosowują się do różnych rozdzielczości ekranów i urządzeń.
% (procent)
Procentowa wartość odnosi się do rozmiaru elementu nadrzędnego. Jest często używana dla szerokości elementów, aby dostosować je do szerokości kontenera.
Przykład użycia wartości % (procent):
.container {
width: 80%;
}W powyższym przykładzie, szerokość kontenera wynosi 80% szerokości elementu nadrzędnego.
em
Wartość em odnosi się do rozmiaru czcionki elementu nadrzędnego. Jest to przydatne, gdy chcemy, aby rozmiar elementu, takiego jak margines, padding czy wysokość, był proporcjonalny do rozmiaru czcionki.
Przykład użycia wartości em:
p {
font-size: 16px;
padding: 1em;
}W powyższym przykładzie, padding wynosi 1em, co jest równoznaczne z 16px, ponieważ rozmiar czcionki wynosi 16px.
rem
Wartość rem odnosi się do rozmiaru czcionki elementu głównego, zazwyczaj <html>. Podobnie jak em, pozwala na skalowanie elementów proporcjonalnie do rozmiaru czcionki, ale zawsze w odniesieniu do elementu głównego.
Przykład użycia wartości rem:
html {
font-size: 16px;
}
h1 {
font-size: 2rem;
}W powyższym przykładzie, rozmiar czcionki dla h1 wynosi 2rem, co jest równoznaczne z 32px (2 x 16px).
vw (viewport width)
1vw to 1% szerokości okna przeglądarki (viewport). Używanie viewport jest szczególnie przydatne, gdy chcemy skalować elementy proporcjonalnie do szerokości okna przeglądarki.
Przykład użycia wartości vw (viewport width):
.section {
width: 50vw;
}W powyższym przykładzie, szerokość sekcji wynosi 50% szerokości okna przeglądarki.
vh (viewport height)
1vh to 1% wysokości okna przeglądarki (viewport). Używanie viewport jest szczególnie przydatne, gdy chcemy skalować elementy proporcjonalnie do wysokości okna przeglądarki.
Przykład użycia wartości vh (viewport height):
.section {
height: 50vh;
}W powyższym przykładzie, wysokość sekcji wynosi 50% wysokości okna przeglądarki.
Warto zapamiętać
Użycie jednostek względnych pozwala na tworzenie responsywnych stron internetowych, które dostosowują się do różnych rozdzielczości ekranów i urządzeń. Projektowanie RWD jest kluczowe dla zachowania spójności interfejsu użytkownika oraz poprawy użyteczności i czytelności strony. Warto pamiętać, że jednostki względne można łączyć i stosować w różnych sytuacjach, aby osiągnąć optymalne rezultaty dla różnych rozmiarów ekranu i urządzeń.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
