Jednostki CSS
Jednostki CSS
CSS ma kilka różnych jednostek do wyrażania długości.
Wiele właściwości CSS przyjmuje wartości „długości”, takie jak width, margin, padding,
font-sizeitp.
Długość to liczba, po której następuje jednostka długości, taka jak 10px,
2emitp.
Przykład
Ustaw różne wartości długości, używając pikseli (pikseli):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Uwaga: Spacja nie może pojawić się między liczbą a jednostką. Jeśli jednak wartość to
0, jednostkę można pominąć.
W przypadku niektórych właściwości CSS dozwolone są długości ujemne.
Istnieją dwa rodzaje jednostek długości: bezwzględne i względne .
Długości bezwzględne
Jednostki długości bezwzględnej są stałe i długość wyrażona w którejkolwiek z nich będzie wyglądać dokładnie tak samo.
Jednostki długości bezwzględnej nie są zalecane do używania na ekranie, ponieważ rozmiary ekranu są bardzo różne. Można ich jednak użyć, jeśli znany jest nośnik wyjściowy, na przykład w przypadku układu wydruku.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Piksele (piksele) odnoszą się do urządzenia do oglądania. W przypadku urządzeń o niskiej rozdzielczości 1px to jeden piksel urządzenia (kropka) wyświetlacza. W przypadku drukarek i ekranów o wysokiej rozdzielczości 1px oznacza wiele pikseli urządzenia.
Względne długości
Jednostki długości względnej określają długość względem innej właściwości długości. Jednostki długości względnej lepiej skalują się między różnymi mediami renderowania.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Wskazówka: jednostki em i rem są praktyczne w tworzeniu idealnie skalowalnego układu!
* Viewport = rozmiar okna przeglądarki. Jeśli okno ma szerokość 50 cm, 1vw = 0,5 cm.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje jednostkę długości.
| Length Unit | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |