14.5. Jednostki relatywne i elastyczne obrazy
Płynność Layoutu: Jednostki Relatywne
Jednym z filarów Responsive Web Design jest tworzenie **płynnych (fluid) layoutów**, które naturalnie dopasowują się do dostępnej przestrzeni, zamiast mieć stałe, sztywne wymiary. Kluczem do osiągnięcia płynności jest używanie **jednostek relatywnych** zamiast absolutnych (jak piksele) do definiowania rozmiarów elementów layoutu, takich jak szerokości kontenerów, kolumn, marginesów czy paddingów.
Procenty (%)
Jednostka procentowa jest jedną z najstarszych i najprostszych jednostek relatywnych. Wartość procentowa jest obliczana **względem odpowiedniego wymiaru elementu nadrzędnego**.
width: 50%;- Element zajmie 50% szerokości swojego rodzica.padding: 5%;- Wypełnienie będzie wynosić 5% szerokości rodzica (nawet dlapadding-topipadding-bottom, co bywa mylące!).margin-left: 10%;- Lewy margines będzie wynosił 10% szerokości rodzica.
Procenty są świetne do tworzenia kolumn, które dzielą dostępną przestrzeń.
.container {
width: 90%; /* Kontener zajmuje 90% szerokości body */
margin: 0 auto;
}
.column-left {
width: 60%; /* Lewa kolumna zajmuje 60% szerokości .container */
float: left;
}
.column-right {
width: 35%; /* Prawa kolumna zajmuje 35% szerokości .container */
float: right;
margin-left: 5%; /* Odstęp 5% szerokości .container */
}
Jednostki Viewportu (vw, vh, vmin, vmax)
Te jednostki są relatywne do **wymiarów viewportu** (obszaru wyświetlania przeglądarki).
vw(Viewport Width): 1vw to 1% szerokości viewportu.vh(Viewport Height): 1vh to 1% wysokości viewportu.vmin(Viewport Minimum): 1vmin to 1% mniejszego wymiaru viewportu (szerokości lub wysokości).vmax(Viewport Maximum): 1vmax to 1% większego wymiaru viewportu (szerokości lub wysokości).
Jednostki viewportu są szczególnie przydatne do tworzenia elementów, które mają zajmować określoną część ekranu niezależnie od kontekstu rodzica, np. pełnoekranowe sekcje lub duże nagłówki.
.full-screen-section {
width: 100vw; /* Pełna szerokość ekranu */
height: 100vh; /* Pełna wysokość ekranu */
}
h1.main-title {
/* Rozmiar czcionki zależny od szerokości ekranu */
font-size: 5vw;
}
.modal-dialog {
/* Szerokość modala to 80% szerokości viewportu, ale nie więcej niż 600px */
width: 80vw;
max-width: 600px;
/* Wysokość to 70% wysokości viewportu, ale nie więcej niż 400px */
height: 70vh;
max-height: 400px;
}
Uwaga: Używanie vw dla font-size może prowadzić do bardzo małego tekstu na wąskich ekranach lub bardzo dużego na szerokich. Często łączy się to z funkcją clamp() lub używa w połączeniu z innymi jednostkami (np. calc(1em + 1vw)).
Inne jednostki relatywne (em, rem)
Jednostki em (względem rozmiaru czcionki rodzica lub samego elementu) i rem (względem rozmiaru czcionki elementu root - <html>) są również relatywne i często używane w RWD, szczególnie do definiowania rozmiarów czcionek, marginesów i paddingów w sposób skalowalny i spójny z typografią.
Elastyczne Obrazy (Fluid/Flexible Images)
Obrazy o stałych wymiarach w pikselach mogą "rozpychać" layout na mniejszych ekranach lub wyglądać nieproporcjonalnie na większych. Technika elastycznych obrazów zapewnia, że obrazy skalują się płynnie wraz ze zmianą rozmiaru kontenera.
Najprostszym i najczęściej stosowanym sposobem jest ustawienie:
img, video, embed, object {
max-width: 100%;
height: auto;
}max-width: 100%;: Kluczowa reguła. Mówi obrazkowi (lub innemu medium), aby nigdy nie był szerszy niż jego kontener. Jeśli kontener jest węższy niż naturalna szerokość obrazka, obrazek zostanie przeskalowany w dół, zachowując proporcje. Jeśli kontener jest szerszy, obrazek wyświetli się w swojej naturalnej szerokości (nie większej).height: auto;: Pozwala przeglądarce automatycznie obliczyć wysokość obrazka na podstawie jego (potencjalnie zmienionej) szerokości, aby zachować oryginalne proporcje. Jest to domyślne zachowanie dlaimg, ale warto je jawnie zadeklarować dla pewności i dla innych mediów.
Dzięki tym dwóm prostym regułom, obrazy i inne osadzone media będą się płynnie skalować i nigdy nie "wyleją się" poza swój kontener, co jest kluczowe dla responsywności.
Bardziej zaawansowane techniki (np. <picture>, srcset)
Samo skalowanie obrazów za pomocą max-width ma wadę: użytkownicy na małych ekranach mobilnych nadal muszą pobierać duże pliki obrazów przeznaczone dla desktopów. Aby zoptymalizować wydajność, stosuje się bardziej zaawansowane techniki HTML, takie jak element <picture> i atrybut srcset na <img>. Pozwalają one przeglądarce wybrać i pobrać najbardziej odpowiedni plik obrazu (np. mniejszy rozmiar, inna rozdzielczość, inny format) w zależności od rozmiaru ekranu, gęstości pikseli i możliwości przeglądarki. Omówimy je bardziej szczegółowo w rozdziale o optymalizacji.
FAQ - Najczęściej zadawane pytania
Kiedy używać procentów, a kiedy jednostek viewportu?
Procenty są idealne, gdy rozmiar elementu ma być zależny od jego bezpośredniego rodzica (np. kolumny w kontenerze). Jednostki viewportu (vw, vh) są lepsze, gdy rozmiar ma być zależny od całego okna przeglądarki, niezależnie od zagnieżdżenia elementu (np. pełnoekranowe sekcje, typografia skalująca się z ekranem).
Czy max-width: 100% działa na wszystkie elementy?
Reguła max-width: 100%; jest najczęściej stosowana do elementów multimedialnych (img, video, iframe, embed, object), aby zapobiec ich "wylewaniu się" z kontenera. Można ją również stosować do innych elementów blokowych, aby ograniczyć ich maksymalną szerokość do szerokości rodzica.
Co jeśli chcę, aby obrazek był zawsze mniejszy niż kontener?
Możesz połączyć max-width: 100%; z konkretną wartością width w procentach lub innej jednostce relatywnej. Na przykład width: 80%; max-width: 100%; sprawi, że obrazek zajmie 80% szerokości kontenera, ale jeśli kontener stanie się bardzo wąski, obrazek nie przekroczy 100% jego szerokości.
Czy height: auto jest zawsze potrzebne przy max-width: 100%?
Dla elementu <img>, height: auto; jest domyślnym zachowaniem przeglądarki, gdy ustawiona jest tylko szerokość. Jednak jawne dodanie height: auto; zapewnia, że proporcje zostaną zachowane, nawet jeśli inne style (lub atrybuty HTML height) próbowałyby ustawić stałą wysokość. Jest to dobra praktyka dla spójności i dla innych typów mediów.