Jednostki rozmiaru

The CSS Podcast – 008: Jednostki rozmiaru

Internet to medium elastyczne, ale czasem chcesz kontrolować jego wymiary, by poprawić ogólną jakość interfejsu. Dobrym przykładem jest ograniczenie długości wierszy w celu poprawy czytelności. Jak można to zrobić w elastycznym medium, takim jak internet?

W tym przypadku możesz użyć jednostki ch, która jest równa szerokości znaku „0” dla wyrenderowanej czcionki w jej obliczonym rozmiarze. Dzięki tej jednostce możesz ograniczyć szerokość tekstu za pomocą jednostki przeznaczonej do dostosowania rozmiaru tekstu, co z kolei zapewnia przewidywalną kontrolę niezależnie od rozmiaru tekstu. Jednostka ch jest jedną z kilku jednostek przydatnych w określonych kontekstach, np. w tym przykładzie.

Numbers

Liczby służą do określania opacity i line-height, a nawet w przypadku wartości kanałów kolorów w rgb. Są to liczby całkowite bez jednostek (1, 2, 3, 100) oraz ułamki dziesiętne (0,1, 0,2, 0,3).

Liczby mają znaczenie w zależności od kontekstu. Na przykład podczas definiowania funkcji line-height liczba jest reprezentatywna dla współczynnika, jeśli zdefiniujesz ją bez jednostki pomocniczej:

p {
  font-size: 24px;
  line-height: 1.5;
}

W tym przykładzie 1.5 jest równy 150% obliczonego rozmiaru czcionki w pikselach elementu p. Oznacza to, że jeśli p ma font-size o wartości 24px, wysokość wiersza zostanie obliczona jako 36px.

Uwaga: lepiej jest użyć wartości bez jednostek dla line-height zamiast określania jednostki. Jak wiesz z modułu dziedziczenia, parametr font-size może być dziedziczony. Definiując element line-height bez jednostek, zachowamy wysokość wiersza względem rozmiaru czcionki. Zapewnia to większy komfort niż np. line-height: 15px, który się nie zmienia i może wyglądać dziwnie w przypadku określonych rozmiarów czcionek.

Numerów można też używać w tych miejscach:

• Podczas ustawiania wartości filtrów filter: sepia(0.5) stosuje do elementu filtr sepii 50%.
• Podczas ustawiania przezroczystości opacity: 0.5 stosuje przezroczystość 50%.
• W kanałach kolorów: rgb(50, 50, 50), gdzie można ustawić wartość od 0 do 255. Zobacz lekcję koloru
• Aby przekształcić element: transform: scale(1.2) skaluje element o 120% jego początkowego rozmiaru.

Procenty

Jeśli stosujesz w CSS procenty, musisz wiedzieć, jak jest on obliczany. Na przykład wartość width jest obliczana jako procent dostępnej szerokości elementu nadrzędnego.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

W powyższym przykładzie szerokość elementu div p wynosi 150px przy założeniu, że układ korzysta z domyślnej wartości box-sizing: content-box.

Jeśli ustawisz margin lub padding jako wartość procentową, będą one stanowić część szerokości elementu nadrzędnego, niezależnie od kierunku.

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

W powyższym fragmencie dane margin-top i padding-left będą obliczane jako 150px.

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

Jeśli ustawisz wartość transform jako wartość procentową, będzie ona oparta na elemencie z zestawem przekształceń. W tym przykładzie p ma wartość translateX o wartości 10%, a width o wartości 50%. Najpierw oblicz szerokość: 150px, bo jest 50% szerokości elementu nadrzędnego. Następnie wybierz 10% z 150px, czyli 15px.

Kluczowy termin: właściwość przekształcenia umożliwia zmianę wyglądu i położenia elementu przez jego obracanie, wykrzywianie, skalowanie i przekształcanie. Można to zrobić w przestrzeni 2D i 3D.

Wymiary i długości

Jeśli dołączysz jednostkę do liczby, stanie się ona wymiarem. np. 1rem jest wymiarem. W tym kontekście jednostka powiązana z liczbą jest określana w specyfikacji jako token wymiaru. Długość to wymiary odnoszące się do odległości, które mogą być bezwzględne lub względne.

Długości bezwzględne

Wszystkie długości bezwzględne liczą się na tej samej podstawie, dzięki czemu są przewidywalne niezależnie od tego, czy są używane w kodzie CSS. Jeśli np. użyjesz funkcji cm do określenia rozmiaru elementu, a następnie wydrukujesz go, porównanie go z linijką powinno być dokładne.

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Jeśli wydrukujesz tę stronę, dokument div zostanie wydrukowany jako czarny prostokąt o wymiarach 10 x 5 cm. Pamiętaj, że CSS służy nie tylko do treści cyfrowych, ale także do określania stylu treści drukowanych. Bezwzględna długość może być bardzo przydatna przy projektowaniu na potrzeby druku.

Jednostka	Nazwa	Odpowiednik
cm	Centymetry	1 cm = 96 piks. / 2,54 piks.
mm	Milimetry	1 mm = 1/10 z 1 cm
P	Ćwierć milimetry	1Q = 1/40 z 1 cm
w	Cale	1in = 2,54 cm = 96 piks.
pc	Picas	1 szt. = 1/6 z 1 cala
pkt	Punkty	1pkt = 1/72 z 1
piks.	Piksele	1 piks. = 1/96 z 1 cala

Względne długości

Długość względna jest obliczana na podstawie wartości podstawowej, podobnie jak procent. Różnica między tymi a wartościami procentowymi polega na tym, że rozmiar elementów można określić w sposób kontekstowy. Oznacza to, że w CSS są jednostki takie jak ch, których podstawą jest rozmiar tekstu, oraz vw, który określa szerokość widocznego obszaru (okno przeglądarki). Względne długości są szczególnie przydatne w przypadku stron internetowych ze względu na ich elastyczny charakter.

Jednostki zależne od rozmiaru czcionki

CSS udostępnia przydatne jednostki dopasowane do rozmiaru elementów renderowanej typografii, takie jak rozmiar samego tekstu (jednostki: em) lub szerokość kroju (ch jednostek).

Jednostka	w stosunku do:
Em	W odniesieniu do rozmiaru czcionki, tj. 1,5 em będzie o 50% większy niż rozmiar czcionki elementu nadrzędnego obliczony na jego podstawie. (W przeszłości wysokość dużej litery „M”).
np.	Heurystyka pozwalająca określić, czy w bieżącym obliczonym rozmiarze czcionki elementu użyć wartości x-height, litery „x” czy „.5em”.
czapka	Wysokość wielkich liter w bieżącym obliczonym rozmiarze czcionki elementu.
ch	Średnie przejście znaków wąskiego glifu w czcionce elementu (reprezentowane przez glif „0”).
ic	Średnie przejście znaków glifu o pełnej szerokości w czcionce elementu, co reprezentuje glif „水” (ideogram wody CJK, U+6C34).
ReM	Rozmiar czcionki elementu głównego (domyślny to 16 pikseli).
lh	Wysokość linii elementu.
RH	Wysokość wiersza elementu głównego.

Jednostki zależne od widocznego obszaru

Wymiarów widocznego obszaru (okna przeglądarki) możesz używać jako podstawy względnej. Te jednostki pomniejszają dostępny obszar widocznego obszaru.

Jednostka	w stosunku do
vw	1% szerokości widocznego obszaru. Użytkownicy korzystają z tej jednostki do ciekawych trików dotyczących czcionek, np. do zmiany rozmiaru czcionki nagłówka odpowiednio do szerokości strony.
VH	1% wysokości widocznego obszaru. Możesz użyć tej funkcji do rozmieszczenia elementów w interfejsie, jeśli masz na przykład pasek narzędzi stopki.
vi	1% rozmiaru widocznego obszaru na osi wbudowanej elementu głównego. Oś oznacza tryby pisania. W trybach pisania poziomego, np. w języku angielskim, oś śródtekstowa jest pozioma. W trybach pisania w pionie, np. w niektórych japońskich krojach pisma, oś wbudowana przesuwa się od góry do dołu.
vb	1% rozmiaru widocznego obszaru na osi bloków elementu głównego. W przypadku osi blokowej jest to kierunkowość języka. Języki LTR, np. angielski, mają pionową oś blokową, ponieważ czytelnicy anglojęzyczni analizują stronę od góry do dołu. Tryb pisania pionowego ma poziomą oś bloków.
vmin	1% mniejszego wymiaru widocznego obszaru.
vMax	1% większego wymiaru widocznego obszaru.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

W tym przykładzie div będzie stanowić 10% szerokości widocznego obszaru, ponieważ 1vw to 1% szerokości widocznego obszaru. Element p ma max-width o wartości 60ch, co oznacza, że nie może przekroczyć 60 znaków (0) dla obliczonej czcionki i rozmiaru.

Cel: gdy dostosujesz rozmiar tekstu do jednostek względnych takich jak em czy rem, a nie według jednostek bezwzględnych (np. px), rozmiar tekstu będzie dostosowany do preferencji użytkownika. Może to być rozmiar czcionki systemu lub rozmiaru czcionki elementu nadrzędnego, np. <body>. Rozmiar podstawowy elementu em to element nadrzędny elementu, a rozmiar podstawowy rem to podstawowy rozmiar czcionki dokumentu. Jeśli nie zdefiniujesz font-size w elemencie html, preferowany przez użytkownika rozmiar czcionki systemowej będzie brany pod uwagę, gdy używasz długości względnej, np. em i rem. Jeśli do określania rozmiaru tekstu użyjesz jednostek px, ta preferencja zostanie zignorowana.

Inne jednostki

Istnieją też inne jednostki, które zostały dostosowane do obsługi konkretnych typów wartości.

Jednostki kąta

W module kolorów przyjrzeliśmy się jednostkom kątów, które ułatwiają definiowanie wartości stopni, np. odcienia w hsl. Przydają się też do obracania elementów w ramach funkcji przekształcania.

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

Za pomocą jednostki kąta deg możesz obrócić element div o 90° wzdłuż swojej środkowej osi.

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

Uwaga: inne jednostki kątów to np. rad (radian), grad (gradian) i turn, które reprezentują część kąta, gdzie 1turn = 360deg, a 0.5turn = 180deg.

Jednostki rozdzielczości

W poprzednim przykładzie wartość min-resolution wynosi 192dpi. Jednostka dpi to kropki na cal. Przydatnym kontekstem jest wykrywanie ekranów o bardzo wysokiej rozdzielczości, np. wyświetlaczy Retina w zapytaniu o multimedia, i wyświetlanie obrazu o wyższej rozdzielczości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat rozmiarów

Które z poniższych wymiarów są prawidłowymi wymiarami?

cm

Centymetry – prawidłowy wymiar bezwzględny.

ui

Interfejs nie jest wymiarem w CSS.

w

Cale – prawidłowy wymiar bezwzględny.

8

To nie jest wymiar CSS

piks.

Piksele – prawidłowy wymiar bezwzględny.

ch

Jednostki znaków, czyli prawidłowy wymiar względny.

ux

Wrażenia użytkowników nie są wymiarem w CSS.

em

Jednostki litery „M” – prawidłowy wymiar względny.

ex

Jednostki litery „x” – prawidłowy wymiar względny.

Czym różnią się jednostki bezwzględne od względnych?

Wartości bezwzględne nie mogą się zmieniać, ale jednostki względne już mogą

Wartości bezwzględne mogą się zmieniać, ale podstawa, na podstawie której są obliczane, nie jest możliwa.

Długość bezwzględna jest obliczana na podstawie jednej współdzielonej wartości podstawowej, w której jednostka względna jest porównywana z wartością podstawową, która może się zmieniać.

Jednostki względne są bardziej elastyczne i elastyczne ze względu na ich świadomość kontekstową, ale jednostki bezwzględne są bardzo ważne i mogą stanowić podstawę niektórych projektów.

Jednostki widocznego obszaru są bezwzględne.

Prawda

Może się wydawać, że mają one charakter bezwzględny, ale są zależne od widocznego obszaru, który może być elementem iframe lub komponentu WebView, i nie zawsze odzwierciedla rozmiar ekranu urządzenia.

Fałsz

Są one zależne od okna dokumentu, w którym zostały utworzone. Może ono, ale nie musi być takie samo jak ekran urządzenia.

Zasoby

• Wartości specyfikacji i jednostki CSS – poziom 4
• Rozmiary i jednostki w MDN
• Wszystko o EMM
• Wyjaśnienie wartości procentowych