Jednostki rozmiaru

Podcast CSS – 008: Sizing units

Internet jest medium responsywnym, ale czasami warto kontrolować jego wymiary, aby poprawić ogólną jakość interfejsu. Dobrym przykładem jest ograniczanie długości wierszy, aby ułatwić czytelność. Jak to zrobić w takim elastycznym medium, jak internet?

W tym przypadku możesz użyć jednostki ch, która jest równa szerokości znaku „0” w renderowanym czcionce o obliczonym rozmiarze. Ta jednostka pozwala ograniczyć szerokość tekstu za pomocą jednostki przeznaczonej do określania rozmiaru tekstu, co z kolei umożliwia przewidywalne kontrolowanie niezależnie od rozmiaru tekstu. Jednostka ch jest jedną z kilku jednostek przydatnych w określonych kontekstach, takich jak ten przykład.

Numbers

Liczby służą do definiowania opacity, line-height, a nawet wartości kanałów kolorów w rgb. Liczby są bezwymiarowymi liczbami całkowitymi (1, 2, 3, 100) i dziesiętnymi (.1, .2, .3).

Liczby mają znaczenie w zależności od kontekstu. Na przykład podczas definiowania line-heightliczba jest reprezentowana przez współczynnik, jeśli zdefiniujesz ją bez jednostki pomocniczej:

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

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

Liczb można też używać w tych miejscach:

• Podczas ustawiania wartości filtrów: filter: sepia(0.5) do elementu zostanie zastosowany sepia filtr 50%.
• Podczas ustawiania przezroczystości: opacity: 0.5 zostanie zastosowana przezroczystość 50%.
• W kanałach kolorów: rgb(50, 50, 50), gdzie wartości 0–255 są akceptowalne do ustawienia wartości koloru. Zobacz lekcję o kolorach
• Aby przekształcić element: transform: scale(1.2), aby powiększyć element do 120% jego początkowego rozmiaru.

Wartość (%)

Korzystając z procentów w CSS, musisz wiedzieć, jak są one obliczane. Na przykład width jest obliczana jako procent dostępnej szerokości w elemencie nadrzędnym.

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

div p {
  width: 50%; 
}

W tym przykładzie szerokość elementu div p wynosi 150px, zakładając, że układ używa domyślnego elementu 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 kodu zarówno margin-top, jak i padding-left będą się przeliczać na 150px.

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

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

Jeśli wartość transform jest wyrażona w procentach, jest ona określana na podstawie elementu z ustawionymi przekształceniami. W tym przykładzie p ma wartość translateX o wartości 10% i width o wartości 50%. Najpierw oblicz szerokość: 150px, bo to 50% szerokości elementu nadrzędnego. Następnie weź 10% z 150px, czyli 15px.

Wymiary i długości

Jeśli dołączysz jednostkę do liczby, stanie się ona wymiarem. Na przykład 1rem jest wymiarem. W tym kontekście jednostka przypisana do liczby jest w specyfikacjach określana jako token wymiaru. Długości to wymiary odnoszące się do odległości. Mogą być bezwzględne lub względne.

Bezwzględne długości

Wszystkie bezwzględne długości są przekształcane na podstawie tej samej bazy, dzięki czemu są przewidywalne w każdym miejscu, w którym są używane w CSS. Jeśli na przykład użyjesz wartości cm do określenia rozmiaru elementu, a potem wydrukujesz dokument, powinien on być dokładny, jeśli porównasz go z miernikiem.

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

Jeśli ta strona zostanie wydrukowana, div będzie wydrukowany jako czarny prostokąt o wymiarach 10 x 5 cm. Pamiętaj, że kod CSS jest używany nie tylko do stylizacji treści cyfrowych, ale też do stylizacji treści drukowanych. Długości bezwzględne mogą być bardzo przydatne podczas projektowania na potrzeby druku.

Długości względne

Długość względna jest obliczana na podstawie wartości podstawowej, podobnie jak wartość procentowa. Różnica między tymi wartościami a procentami polega na tym, że możesz dostosować rozmiar elementów do kontekstu. Oznacza to, że CSS ma jednostki takie jak ch, które używają rozmiaru tekstu jako podstawy, oraz vw, które są oparte na szerokości widocznego obszaru (okna przeglądarki). Długości względne są szczególnie przydatne w internecie ze względu na to, że są elastyczne.

Jednostki względne do rozmiaru czcionki

CSS udostępnia przydatne jednostki zależnie od rozmiaru elementów renderowanej typografii, takich jak rozmiar samego tekstu (em) lub szerokość znaków kroju (ch).

Jednostki względne do widocznego obszaru

Jako podstawy względnej możesz użyć wymiarów widocznego obszaru (okna przeglądarki). Te jednostki dzielą dostępną przestrzeń widoku.

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

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

Inne jednostki

Istnieją też inne jednostki, które zostały określone w celu obsługi określonych typów wartości.

Jednostki kąta

W module kolorów przyjrzeliśmy się jednostkom kąta, które są przydatne do definiowania wartości kąta, na przykład odcienia w hsl. Są one też przydatne do obracania elementów w ramach funkcji transformacji.

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

Za pomocą jednostki kąta deg możesz obracać element div o 90° wokół jego ś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');
  }
}

Jednostki rozdzielczości

W poprzednim przykładzie wartość min-resolution to 192dpi. Jednostka dpi oznacza punkty na cal. W tym celu można wykrywać ekrany o bardzo wysokiej rozdzielczości, takie jak wyświetlacze Retina, w zapytaniu o multimedia i podawać obraz o wyższej rozdzielczości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o rozmiarach

Zasoby

• Wartości specyfikacji CSS i jednostki – poziom 4
• Rozmiary i jednostki w MDN
• Wszystko o EMS
• Wyjaśnienie dotyczące procentów