Для завдання розмірів різних елементів у CSS використовуються абсолютні та відносні одиниці виміру. Абсолютні одиниці не залежить від пристрою виведення, а відносні одиниці визначають розмір елемента щодо значення іншого розміру.
Відносні одиниці
Відносні одиниці зазвичай використовують для роботи з текстом. У табл. 1 перераховані основні відносні одиниці.
| Одиниця | Опис |
|---|---|
| em | Розмір шрифту поточного елемента |
| ex | Висота символу x |
| ch | Ширина символу 0 поточного елемента |
| rem | Розмір шрифту кореневого елемента |
Одиниця em це значення, що змінюється, яке залежить від розміру шрифту поточного елемента (розмір встановлюється через стильову властивість font-size). У кожному браузері закладено розмір тексту, застосовуваний у разі, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в стандартному браузері або розмірі шрифту батьківського елемента. Відсотковий запис ідентичний em, у тому сенсі, що значення 1em і 100% рівні.
Одиниця ex визначається як висота символу «x» у нижньому регістрі. На ex поширюються ті самі правила, що й для em, а саме, він прив'язаний до розміру шрифту, заданого в стандартному браузері , або до розміру шрифту батьківського елемента.
Одиниця ch дорівнює ширині символу «0» для поточного елемента і em залежить від розміру шрифту.
Різниця між em та rem наступна. em залежить від розміру шрифту батька елемента і змінюється разом з ним, а rem прив'язаний до кореневого елемента, тобто. розміру шрифту заданого для елемента html.
Також є група відносних одиниць, прив'язаних до розміру області перегляду браузера. У табл. 2 показаний їх список із описом.
| Одиниця | Опис |
|---|---|
| vw | 1% від ширини області перегляду |
| vh | 1% від висоти області перегляду |
| vmin | 1% від меншого значення з ширини та висоти області перегляду |
| vmax | Визначається, що більше, значення ширини або висоти області перегляду і від нього обчислюється 1% |
Абсолютні одиниці
Абсолютні одиниці є фізичні розміри — дюйми, сантиметри, міліметри, пункти, піки, а також пікселі. Для пристроїв з низьким dpi (кількість точок, що припадають на один дюйм, визначає щільність точок), прив'язка йде до пікселя. У цьому випадку один дюйм дорівнює 96 пікселів. Очевидно, що реальний дюйм не співпадатиме з дюймом на такому пристрої. На пристроях з високим dpi реальний дюйм збігається із дюймом на екрані, тому розмір пікселя обчислюється як 1/96 від дюйма. У табл. 3 перераховано основні абсолютні одиниці.
| Одиниця | Опис |
|---|---|
| px | Піксель |
| in | Дюйм (1 дюйм дорівнює 2,54 см) |
| cm | Сантиметр |
| mm | Міліметр |
| pt | Пункт (1 пункт дорівнює 1/72 дюйма) |
| pc | Піка (1 піка дорівнює 12 пунктам) |
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Відносні одиниці</title> <style> h1 { font-size: 30px; }
p { font-size: 1.5em; }
</style>
</head>
<body> <h1>Заголовок розміром 30 пікселів</h1> <p>Розмір тексту 1.5 em</p>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Абсолютні одиниці</title> <style> h1 { font-size: 24pt; }
p { margin-left: 30mm; }
</style>
</head>
<body> <h1>Заголовок розміром 24 пункти</h1> <p>Зсув тексту праворуч на 30 мм</p>
</body>
</html> Примітка
При установці розмірів обов'язково вказуйте одиниці вимірювання, наприклад width: 30px. В іншому випадку браузер не зможе показати бажаний результат, оскільки не розуміє, який розмір вам потрібний. Одиниці не додаються лише за нульового значення (margin: 0).
Internet Explorer підтримує одиницю vm замість vmin.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Values and Units Module Level 3 | Можлива рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендац ия |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation ( Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| px, in, cm, mm, pt, pc, em, ex | 3 | 12 | 1 | 3.5 | 1 | 1 |
| ch | 9 | 12 | 27 | 20 | 7 | 1 |
| rem | 9 | 12 | 4 | 11.6 | 4.1 | 3.6 |
| vw, vh | 9 | 12 | 20 | 20 | 6 | 19 |
| vmax | 16 | 26 | 15 | 6.1 | 19 | |
| vmin | 9 | 12 | 20 | 15 | 6 | 19 |
| px, in, cm, mm, pt , pc, em, ex | ||||
| ch | 4.4 | 2 | 37 | 7.1.1 |
| rem | 2.1 | 2 | 4 | |
| vw, vh | 2.1 | 19 | 37 | 6 |
| vmax | 4.4 | 19 | 37 | 6.1 |
| vmin | 2.1 | 19 | 37 | 6 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується; - — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані у специфікації.
Число вказує версію браузера, з якої властивість підтримується.