CSS Одиниці
CSS Одиниці довжини
CSS має кілька різних одиниць для вираження довжини.
Багато CSS властивостей приймають значення "довжини" такі як width, margin, padding, font-size і т.д.
Length (довжина) - це число, за яким слідує одиниця довжини, наприклад 10px, 2em і т.д.
Приклад
Встановіть різні значення довжини, використовуючи px (пікселі):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Примітка: Між числом та одиницею не може бути пробілу (тобто, треба писати 10px, а не 10 px). Також, якщо значення дорівнює 0, одиницю виміру можна не вказувати (тобто, варто писати 0, а не 0px).
Для деяких CSS властивостей дозволена негативна довжина.
Існує два типу одиниць довжини: абсолютна та відносна.
Абсолютні довжини
Одиниці абсолютної довжини є фіксованими, і довжина, виражена в будь-якій із них, буде відображатися саме як фіксований розмір.
Абсолютні одиниці довжини не рекомендуються для використання виведення зображення на екрані, тому що розміри екранів різних пристроїв можуть сильно відрізнятися. Однак їх можна використовувати, якщо відомий вихідний носій, наприклад, для друкованого макета (сторінки для друку).
| Одиниця | Опис |
|---|---|
| cm | сантиметри Спробуй це |
| mm | міліметри Спробуй це |
| in | дюйми (1 дюйм = 96px = 2.54см) Спробуй це |
| px * | пікселі (1px = 1/96th в 1) Спробуй це |
| pt | точки (1pt = 1/72 в 1) Спробуй це |
| pc | picas (1pc = 12 pt) Спробуй це |
* Пікселі (px) відносні і залежать від пристрою перегляду. Для пристроїв з низькою роздільністю 1 піксель - це один піксель (точка) пристрою на дисплеї. Для принтерів та екранів з високою роздільністю 1px передбачає кілька пікселів на пристрої.
Відносні довжини
Одиниці відносної довжини визначають довжину відносного іншої властивості довжини. Відносні одиниці довжини краще масштабуються між різними середовищами рендерингу (виведення на екран).
| Одиниця | Опис | |
|---|---|---|
| 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 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Не підтримується | 19.0 | 7.0 | 20.0 |
