Rozmiary CSS pozwalają na precyzyjne określenie rozmiarów elementów na stronie internetowej, co jest kluczowe dla tworzenia układów stron www. Dlatego w tym artykule skupię się na dwóch podstawowych właściwościach definiujących rozmiar elementów w CSS: szerokości (width) i wysokości (height). Dodatkowo omówię jak je definiować, jakie są dostępne jednostki miar oraz jak używać tych właściwości w różnych kontekstach.
Rozmiary CSS – ustawienie szerokośsi i wysokości
Właściwości width i height pozwalają na ustawienie szerokości i wysokości elementów. Można je definiować przy użyciu różnych jednostek miar, takich jak piksele (px), procenty (%), jednostki względne (em, rem), oraz jednostki widoku (vw, vh).
width – szerokość
Aby ustawić szerokość elementu w CSS, używamy właściwości width. Możemy użyć różnych jednostek miary, takich jak piksele (px), procenty (%), em, rem, vw (viewport width) i innych.
.element {
width: 200px; /* Szerokość 200 pikseli */
}height – wysokość
Wysokość elementu możemy ustawić za pomocą właściwości height.
.element {
height: 100px; /* Wysokość 100 pikseli */
}Jednostki miar w CSS
Piksele (px)
Piksele są najczęściej używaną jednostką miary w CSS. Są absolutne, co oznacza, że ich wartość nie zmienia się w zależności od innych czynników.
.element {
width: 300px;
height: 150px;
}Procenty (%)
Procenty są jednostką względną, co oznacza, że ich wartość zależy od rozmiaru elementu nadrzędnego.
.container {
width: 400px;
}
.element {
width: 50%; /* Połowa szerokości elementu nadrzędnego (400px / 2 = 200px) */
}Em i Rem
Jednostki em i rem są związane z rozmiarem czcionki. Jedna em jest równa rozmiarowi czcionki elementu nadrzędnego, a jedna rem jest równa rozmiarowi czcionki elementu głównego (html).
html {
font-size: 16px;
}
.container {
font-size: 1em; /* 16px */
}
.element {
width: 10em; /* 10 * 16px = 160px */
height: 5rem; /* 5 * 16px = 80px */
}Viewport Width (vw) i Viewport Height (vh)
Jednostki vw i vh są względne w stosunku do wymiarów okna przeglądarki (viewport). 1vw to 1% szerokości okna przeglądarki, a 1vh to 1% wysokości okna przeglądarki.
.element {
width: 50vw; /* 50% szerokości okna przeglądarki */
height: 50vh; /* 50% wysokości okna przeglądarki */
}Maksymalna i minimalna szerokość/wysokość
CSS umożliwia ustawienie maksymalnej i minimalnej szerokości oraz wysokości elementów za pomocą właściwości max-width, min-width, max-height i min-height.
.element {
width: 100%;
max-width: 600px; /* Maksymalna szerokość 600 pikseli */
min-height: 200px; /* Minimalna wysokość 200 pikseli */
}Podstawy użycia calc()
Funkcja calc() pozwala na wykonywanie obliczeń przy ustalaniu wartości rozmiarów. Dzięki niej można łączyć różne jednostki miary i dynamicznie obliczać wartości.
.dynamic-box {
width: calc(100% - 50px); /* szerokość równa 100% szerokości rodzica minus 50px */
height: calc(50vh + 20px); /* wysokość równa 50% wysokości okna przeglądarki plus 20px */
}Praktyczne przykłady użycia szerokości i wysokości w CSS
Ustawianie stałych rozmiarów
Poniżej znajduje się przykład ustawienia stałych rozmiarów elementu za pomocą pikseli.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stałe Rozmiary</title>
<style>
.fixed-size {
width: 300px;
height: 150px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="fixed-size">Stałe Rozmiary</div>
</body>
</html>Ustawianie rozmiarów w procentach
Przykład ustawienia rozmiarów elementu w procentach w stosunku do elementu nadrzędnego.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rozmiary w Procentach</title>
<style>
.parent {
width: 500px;
height: 250px;
background-color: lightgray;
}
.child {
width: 50%;
height: 50%;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">50% szerokości i wysokości rodzica</div>
</div>
</body>
</html>Ustawianie rozmiarów za pomocą jednostek widoku
Przykład użycia jednostek widoku (vw i vh), które są zależne od wymiarów okna przeglądarki.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jednostki Widoku</title>
<style>
.viewport-size {
width: 20vw;
height: 10vh;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="viewport-size">20vw x 10vh</div>
</body>
</html>Ustawianie minimalnej i maksymalnej szerokości i wysokości
CSS pozwala także na ustawienie minimalnych i maksymalnych rozmiarów elementów za pomocą właściwości min-width, max-width, min-height i max-height.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min i Max Rozmiary</title>
<style>
.resizable {
width: 50%;
height: 50%;
min-width: 200px;
max-width: 600px;
min-height: 100px;
max-height: 400px;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="resizable">Min i Max Rozmiary</div>
</body>
</html>Elastyczny układ strony
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elastyczny Układ Strony</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.box {
flex: 1 1 calc(33.333% - 40px); /* Trzy kolumny z marginesami */
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Pierwszy box</div>
<div class="box">Drugi box</div>b
<div class="box">Trzeci box</div>
</div>
</body>
</html>Rozmiary CSS – podsumowanie
Z pewnością znajomość różnych sposobów ustawiania szerokości i wysokości elementów w CSS jest kluczowa dla tworzenia elastycznych i responsywnych układów stron internetowych. Co więcej wybór odpowiednich jednostek miar zależy od kontekstu i specyficznych wymagań projektu:
- Jednostki absolutne (piksele) są używane, gdy wymagane są stałe rozmiary.
- Jednostki względne (procenty,
em,rem) są używane do tworzenia elastycznych układów, które dostosowują się do różnych rozmiarów ekranów. - Jednostki widoku (
vw,vh) są używane do ustawiania rozmiarów względnych w stosunku do wymiarów okna przeglądarki.
Dlatego eksperymentowanie z różnymi jednostkami miar pozwoli lepiej zrozumieć ich zastosowanie i pomoże w tworzeniu bardziej zaawansowanych i estetycznych stron internetowych. Pamiętaj, że kluczem do sukcesu jest praktyka, więc śmiało testuj różne rozwiązania i dostosowuj je do swoich potrzeb.