size CSS значення
CSS має кілька різних одиниць для вираження довжини.
Багато властивостей CSS приймають значення "довжини", такі як width, margin, padding, font-size, border-width тощо.
Довжина - це число, за яким слідує одиниця довжини, наприклад 10px, 2em та ін.
Пробіл не відображається між значенням та одиницею виміру. Однак, якщо значення дорівнює 0, одиниця виміру може бути опущена. Для деяких властивостей CSS дозволені негативні довжини.
Є два типи одиниць довжини: абсолютна і відносна.
Абсолютні довжини
Абсолютні одиниці представляють собою фізичні розміри - дюйми, сантиметри, міліметри, пункти, піки, а також пікселі. У таблиці перераховані основні відносні одиниці.
| Одиниция виміру | Опис |
|---|---|
| cm | сантиметр |
| mm | міліметр |
| in | дюйм (1in = 96px = 2.54cm) |
| px | піксель (1px = 1/96th of 1in) |
| pt | пункт (1pt = 1/72 1in) |
| pc | піка (1pt = 1/72 1in) |
Для пристроїв з низьким dpi (кількість точок, що припадають на один дюйм, визначає щільність точок) прив'язка йде до пікселя. У цьому випадку один дюйм дорівнює 96 пікселям. Очевидно, що реальний дюйм не співпадатиме з дюймом на такому пристрої. На пристроях з високим dpi реальний дюйм збігається з дюймом на екрані, тому розмір пікселя обчислюється як 1/96 від дюйма.
Відносні довжини
Відносні одиниці довжини вказують довжину щодо властивості іншої довжини. Відносна одиниця довжини збільшується між різними середовищами візуалізації.
Відносні одиниці зазвичай використовують для роботи з текстом.
| Одиниция виміру | Опис |
|---|---|
| em | Розмір шрифту поточного елементу. |
| ex | Відносно x-висоти поточного шрифту (рідко використовується) |
| ch | Відносно ширини "0" (нуль) |
| rem | Відносно розміру шрифту кореневого елемента. |
| vw | Відносно 1% ширини вікна перегляду. |
| vh | Відносно 1% висоти вікна перегляду. |
| vmin | Відносно 1% від меншого розміру вікна перегляду. |
| vmax | Відносно 1% від розміру вікна перегляду. |
| % | Відносно батьківського елемента. |
Одиниця em - це змінне значення, яке залежить від розміру шрифту поточного елементу (розмір встановлюється через стильову властивість font-size). В кожному браузері закладений розмір тексту, який застосовується в тому випадку, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за замовчуванням або розміром шрифту батьківського елементу. Відсотковий запис ідентичний em, в тому сенсі, що значення 1em і 100% рівні.
Одиниця ex визначається як висота символу «x» в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за замовчуванням, або до розміру шрифту батьківського елементу.
Одиниця ch дорівнює ширині символу «0» для поточного елемента і подібно em залежить від розміру шрифту.
Різниця між em і rem наступна: em залежить від розміру шрифту батька елемента і змінюється разом з ним, а rem прив'язаний до кореневого елементу, тобто розміру шрифта заданого для елемента html.
| Порада: | При установці розмірів обов'язково вказуйте одиниці виміру, наприклад |
| Нотатка: | Internet Explorer підтримує одиницю |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| px, in, cm, mm, pt, pc, em, ex | 3.0 |
12.0 |
1.0 |
3.5 |
1.0 |
1.0 |
| ch | 9.0 |
12.0 |
27.0 |
20.0 |
7.0 |
1.0 |
| rem | 9.0 |
12.0 |
4.0 |
11.6 |
4.1 |
3.6 |
| vw, vh | 9.0 |
12.0 |
20.0 |
20.0 |
6.0 |
19.0 |
| vmax | не підтримується |
16.0 |
26.0 |
15.0 |
6.1 |
19.0 |
| vmin | 9.0 |
12.0 |
20.0 |
15.0 |
6.0 |
19.0 |
| Переглядач | |||
|---|---|---|---|
| px, in, cm, mm, pt, pc, em, ex | властивість повністю підтримується браузером з усіма допустимими значеннями |
властивість повністю підтримується браузером з усіма допустимими значеннями |
властивість повністю підтримується браузером з усіма допустимими значеннями |
| ch | 4.4 |
2.0 |
71.1 |
| rem | 2.1 |
2.0 |
4.0 |
| vw, vh | 2.1 |
19.0 |
6.0 |
| vmax | 4.4 |
19.0 |
6.1 |
| vmin | 2.1 |
19.0 |
6.0 |
Мобільних переглядачів ще не додано.
Приклади
Демонстрація роботи.
Синтаксис властивості.
h1 {font-size: 50px;}
h1 {font-size: 50pc;}
h1 {font-size: 1.5cm;}
h1 {font-size: 15mm;}
h1 {font-size: 3rem;}