CSS Одиниці
CSS Одиниці
CSS має кілька різних одиниць для вираження довжини.
Багато властивостей CSS мають такі значення "length", як width, margin, padding, font-size тощо.
Length (довжина) — це число, за яким іде одиниця вимірювання довжини, наприклад 10px, 2em тощо.
Приклад
Встановіть різні значення довжини, використовуючи px (пікселі):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Спробуйте самі »
Примітка: Між номером і одиницею не може бути пробілу. Однак якщо значення дорівнює 0, одиницю можна пропустити.
Для деяких властивостей CSS дозволена від’ємна довжина.
Існує два типи одиниць вимірювання довжини: абсолютна та відносна.
Абсолютні довжини
Абсолютні одиниці вимірювання довжини є фіксованими, і довжина, виражена в будь-якій із них, відображатиметься як саме такий розмір.
Абсолютні одиниці вимірювання довжини не рекомендовано використовувати для відображення на екрані, оскільки розміри екрана дуже різні. Однак їх можна використовувати, якщо відомий носій виводу, наприклад, для макета друку.
| Одиниця | Опис |
|---|---|
| cm | сантиметри Спробуй це |
| mm | міліметри Спробуй це |
| in | дюйми (1in = 96px = 2.54cm) Спробуй це |
| px * | пікселі (1px = 1/96th of 1in) Спробуй це |
| pt | пункти (1pt = 1/72 of 1in) Спробуй це |
| pc | пікаси (1pc = 12 pt) Спробуй це |
* Пікселі (px) відносяться до пристрою перегляду. Для пристроїв із низькою роздільною здатністю 1 піксель — це один піксель пристрою (точка) дисплея. Для принтерів і екранів з високою роздільною здатністю 1 піксель означає кілька пікселів пристрою.
Відносні довжини
Одиниці відносної довжини визначають довжину відносно іншої властивості довжини. Одиниці відносної довжини краще масштабуються між різними засобами візуалізації.
| Одиниця | Опис | |
|---|---|---|
| em | Відносно розміру шрифту елемента (2em означає 2-кратний розмір поточного шрифту) | Спробуй це |
| ex | Відносно x-висоти поточного шрифту (використовується рідко) | Спробуй це |
| ch | Відносно ширини "0" (нуль) | Спробуй це |
| rem | Відносно розміру шрифту кореневого елемента | Спробуй це |
| vw | Відносно 1% ширини вікна перегляду* | Спробуй це |
| vh | Відносно 1% висоти вікна перегляду* | Спробуй це |
| vmin | Відносно 1% меншого розміру вікна перегляду* | Спробуй це |
| vmax | Відносно 1% більшого розміру вікна перегляду* | Спробуй це |
| % | Відносно батьківського елемента | Спробуй це |
Підказка: Модулі em та rem практичні для створення ідеально масштабованого макета!
* Viewport = розмір вікна браузера. Якщо вікно перегляду має ширину 50 см, 1vw = 0.5см.
Підтримка браузерами
Числа в таблиці вказують на першу версію браузера, яка повністю підтримує одиницю вимірювання довжини.
| Одиниця вимірювання довжини | |||||
|---|---|---|---|---|---|
| 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 |
