Czym są wartości procentowe w CSS?
Wartości procentowe w CSS pozwalają ustalać rozmiary elementów względnie, czyli zależnie od rozmiaru elementu nadrzędnego. Dzięki temu strona może lepiej dopasowywać się do różnych szerokości ekranu, np. komputera, tabletu lub telefonu.
Przykład zastosowania
Jeżeli obraz ma mieć szerokość równą szerokości swojego kontenera, można zapisać:
img {
width: 100%;
}
Oznacza to, że obraz zajmie 100% szerokości elementu nadrzędnego, a nie zawsze stałą liczbę pikseli.
Procenty a piksele
width: 400px;— obraz ma zawsze 400 pikseli szerokości, niezależnie od ekranu.width: 100%;— obraz dopasowuje się do szerokości kontenera.width: 50%;— obraz zajmuje połowę szerokości kontenera.
Dlaczego to ważne?
Na małych ekranach stałe wartości w pikselach mogą powodować, że obraz będzie wystawał poza obszar strony. Wartości procentowe pomagają tworzyć układy elastyczne i responsywne.
Typowy zapis dla responsywnego obrazu
img {
max-width: 100%;
height: auto;
}
Taki zapis sprawia, że obraz nie przekroczy szerokości kontenera, a jego wysokość zostanie dopasowana proporcjonalnie.