Jednostki miar w CSS służą do wyrażania wielkości, odległości i innych wartości wymiarowych w kontekście elementów na stronie. Właściwe zrozumienie i użycie jednostek miar jest kluczowe w projektowaniu i tworzeniu stron internetowych, umożliwiający precyzyjne określenie wymiarów, rozmiarów, odstępów i innych atrybutów wizualnych. Wykorzystanie odpowiednich jednostek miar jest niezbędne do osiągnięcia spójności wizualnej i responsywności stron internetowych, które będą dobrze wyglądać na różnych urządzeniach, rozdzielczościach ekranów i skalach powiększenia.
Użycie jednostek miar
Piksele (px)
Jeden z najczęściej używanych typów jednostek są piksele, które są jednostkami absolutnymi i reprezentują pojedyncze punkty na ekranie.
Przykład użycia jednostki px:
<predata-previewers=””>p {
font-size: 16px;
}
W powyższym przykładzie, rozmiar fontu elementów p zostanie ustawiony na 16 pikseli.
Em (em)
Jednostka względna, której wartość jest zależna od rozmiaru czcionki elementu rodzica.
Przykład użycia jednostki em:
<predata-previewers=””>body {
font-size: 18px;
}
h1 {
font-size: 2em;
}
W powyższym przykładzie, rozmiar fontu elementów h1 zostaje ustawiony na 2em, co oznacza, że będzie równy dwukrotności rozmiaru fontu elementu rodzica (w tym przypadku body, czyli 18px * 2 = 36px).
Rem (rem)
Jednostka względna, której wartość jest zależna od rozmiaru czcionki elementu <html>.
Przykład użycia jednostki rem:
<predata-previewers=””>html {
font-size: 16px;
}
h2 {
font-size: 1.5rem;
}
W powyższym przykładzie, rozmiar fontu elementów h2 zostaje ustawiony na 1.5rem, co oznacza, że będzie równy 1.5 * rozmiar fontu elementu <html> (16px * 1.5 = 24px).
Procent (%)
Jednostka względna, której wartość jest zależna od rozmiaru, szerokości lub wysokości elementu rodzica.
Przykład użycia jednostki procentowej:
<predata-previewers=””>.container {
width: 80%;
}
W powyższym przykładzie, szerokość elementu o klasie .container zostaje ustawiona na 80% szerokości elementu rodzica.
Jeśli chcesz łatwo wykonywać obliczenia związane z procentami zobacz kalkulator procentowy online.
Jednostki viewport (vh, vw)
Jednostki względne, które odnoszą się do wymiarów okna przeglądarki (viewport). Jednostka vh oznacza procent wysokości viewportu, natomiast vw oznacza procent szerokości viewportu.
Przykład użycia jednostki viewport:
<predata-previewers=””>.fullscreen {
height: 100vh
width: 100vw
}
W powyższym przykładzie, szerokość i wysokość elementu o klasie .fullscreen zostaje ustawiona na 100% szerokości oraz wysokości elementu rodzica.
Warto zapamiętać
Jednostki miar CSS są niezbędnym elementem w tworzeniu responsywnych i estetycznie atrakcyjnych stron internetowych. Wybór odpowiednich jednostek, takich jak piksele, procenty, jednostki względne czy jednostki oparte na szerokości widoku, pozwala na precyzyjne kontrolowanie wymiarów, odstępów i innych atrybutów wizualnych strony. Ważne jest zrozumienie zalet i wad poszczególnych jednostek miar oraz umiejętne stosowanie ich w praktyce, aby zapewnić spójność, skalowalność i dostępność projektów.
