Jednostki rozmiaru

Podcast CSS – 008: Sizing units .

Internet jest medium elastycznym, ale czasami możesz chcieć kontrolować jego wymiary, by poprawić ogólną jakość interfejsu. Dobrym przykładem jest ograniczenie długości wierszy w celu zwiększenia czytelności. Jak to zrobić w takim elastycznym medium, jak internet?

W tym przypadku możesz użyć jednostki ch, która ma szerokość „0” w wyrenderowanej czcionce w jej obliczonym rozmiarze. Umożliwia ona ograniczenie szerokości tekstu za pomocą jednostki przeznaczonej do które z kolei zapewnia przewidywalną kontrolę niezależnie od rozmiaru tekstu. Jednostka ch to jedna z kilku jednostek, które są pomocne w konkretnych kontekstach, takich jak ten przykład.

Numbers

Liczby służą do określania parametrów opacity i line-height, a nawet do określania wartości kanałów kolorów w polu rgb. Liczby to liczby całkowite (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 gdy definiujesz line-height, liczba jest reprezentatywna dla współczynnika, jeśli zostanie zdefiniowany 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 o wartości 24px, wysokość wiersza zostanie obliczona jako 36px.

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 0-255 pozwala określić wartość koloru. Zobacz lekcję dotyczącą kolorów
• Aby przekształcić element: transform: scale(1.2) skaluje element o 120% jego początkowego rozmiaru.

Procenty

Jeśli w CSS używasz procentu, musisz wiedzieć, jak jest on obliczany. Na przykład width jest obliczany jako procent dostępnej szerokości w elemencie nadrzędnym.

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ślnego box-sizing: content-box.

Jeśli ustawisz margin lub padding jako procent, będą stanowiły 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 */
}

We fragmencie kodu powyżej margin-top i padding-left będą obliczać 150px.

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

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

Jeśli ustawisz wartość transform w procentach, opiera się na elemencie z zestawem przekształcenia. 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. Potem wybierz 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 powiązana z liczbą jest w specyfikacjach nazywana tokenem wymiaru. Długości to wymiary odnoszące się do odległości i mogą być bezwzględne lub względne.

Długości bezwzględne

Wszystkie długości bezwzględne rozwiązują się na tej samej podstawie, dzięki czemu są przewidywalne niezależnie od tego, gdzie są używane w usłudze porównywania cen. Jeśli np. używasz właściwości cm, aby określić rozmiar elementu, a następnie go wydrukować, powinno być dokładne, gdy porównasz go z linijką.

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 CSS służy nie tylko do tworzenia treści cyfrowych, ale też do określania stylu materiałów drukowanych. Bezwzględna długość może być bardzo przydatna przy projektowaniu materiałów do 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 wartościami procentowymi polega na tym, że możesz określić rozmiar elementów kontekstowo. Oznacza to, że CSS ma jednostki takie jak ch, na których podstawą jest rozmiar tekstu, i vw, która jest oparta 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 zależne od rozmiaru czcionki

CSS udostępnia przydatne jednostki zależne od rozmiaru elementów renderowanej typografii, np. rozmiar samego tekstu (jednostki: em) lub szerokość kroju krojów pisma (jednostki: ch).

Jednostki zależne od widocznego obszaru

Wymiarów widocznego obszaru (okna przeglądarki) możesz użyć jako podstawy względnej. Te jednostki zajmują część dostępnego obszaru widocznego obszaru.

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 Nie może ona przekraczać szerokości 60 „0”. użyj obliczonej czcionki i rozmiaru.

Różne jednostki

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

Jednostki kąta

W module kolorów: zbadaliśmy jednostki kątów, przydatne przy definiowaniu wartości stopni, takich jak barwa w hsl. Są one również przydatne przy obracaniu elementów w ramach funkcji przekształcania.

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 wynosi 192dpi. Jednostka dpi oznacza punkty na cal. Przydatny kontekst to wykrywanie ekranów o bardzo wysokiej rozdzielczości, np. Retina wyświetla w zapytaniu o multimedia i wyświetla obraz o wyższej rozdzielczości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat rozmiarów

Zasoby

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