Jednostki rozmiaru

The CSS Podcast - 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 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” 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 sterowanie 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 wartości line-height liczba 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ówne 150% obliczonego 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 o 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 poprzednim 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 poprzednim przykładzie zarówno margin-top, jak 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 wartość transform jest wyrażona w procentach, jest ona oparta na elemencie z ustawioną transformacji. W tym przykładzie element p ma wartość translateX = 10%, a element width = 50%. Najpierw oblicz szerokość: 150px, ponieważ jest to 50% szerokości elementu nadrzędnego. Następnie weź 10% z 150px, czyli 15px.

Wymiary i długości

Jeśli dodasz do liczby jednostkę miary, stanie się ona wymiarem. Na przykład 1rem jest wymiarem. W tym kontekście jednostka dołączona do liczby jest w specyfikacjach określana jako wymiar tokenu. 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ć zgodny z wymiarami na linijce. Pamiętaj, że jednostki fizyczne, takie jak cm i in, nie będą wyświetlane w tych rozmiarach na ekranach z powodu różnic w rozmiarach pikseli. Fizyczne jednostki miary najlepiej nadają się do arkuszy stylów do druku, gdzie są bardziej niezawodne.

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

Jeśli wydrukujesz tę stronę, element div zostanie wydrukowany jako czarny prostokąt o wymiarach 10 x 5 cm. Pamiętaj, że kod CSS jest używany nie tylko do tworzenia treści cyfrowych, ale też do nadawania stylu treściom drukowanym. 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 bazowej, podobnie jak procent. Różnica między tymi wartościami a procentami polega na tym, że możesz definiować rozmiary na podstawie odpowiedniego rozmiaru bazowego, np. domyślnego rozmiaru czcionki lub wymiarów okna. Oznacza to, że CSS ma jednostki takie jak ch, które wykorzystują dane o rozmiarze czcionki jako podstawę, 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 jego charakter elastyczny.

Jednostki względne do rozmiaru czcionki

CSS udostępnia przydatne jednostki, które są względne do rozmiaru elementów renderowanej typografii, na przykład rozmiaru samego tekstu (jednostki em) lub szerokości znaków czcionki (jednostki 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 będzie równe 10% szerokości widocznego obszaru, ponieważ 1vw to 1% szerokości widocznego obszaru. Element p ma atrybut max-width o wartości 60ch, co oznacza, że nie może przekraczać szerokości 60 znaków „0” w obliczonym rozmiarze i czcionce.

Alternatywne jednostki względne widocznego obszaru

Wartość jednostek względnych widocznego obszaru pozostaje taka sama, dopóki rozmiar widocznego obszaru się nie zmieni. Jednak przeglądarki mobilne zwykle wyświetlają lub ukrywają elementy interfejsu, aby wyświetlać jak najwięcej treści na małych ekranach bez zmiany obliczonego rozmiaru widoku. Aby uwzględnić te zmiany w widocznym obszarze, możesz użyć alternatywnych jednostek względem widoku.

Jednostki względne do kontenera

Jako podstawy względnej możesz użyć wymiarów kontenera elementu. Te jednostki dzielą dostępny obszar kontenera. Są one przydatne w zapytaniach dotyczących kontenera, ponieważ umożliwiają ustawianie rozmiarów czcionek na podstawie dostępnej przestrzeni.

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);
}

Korzystając z jednostki kąta deg, możesz obrócić div o 90° wokół osi środkowej.

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 ekrany Retina, w zapytaniu o multimedia i podawać obraz o wyższej rozdzielczości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o rozmiarach

Zasoby

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