| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0 + | 1.0 + | 3.5 + | 1.3 + | 1.0 + | 1.0 + | 1.0 + |
Опис
Для завдання розмірів різних елементів, в CSS використовуються абсолютні і відносні одиниці виміру. Абсолютні одиниці не залежать від пристрою виведення, а відносні одиниці визначають розмір елемента щодо значення іншого розміру.
Відносні одиниці
Відносні одиниці зазвичай використовують для роботи з текстом, або коли треба обчислити процентне співвідношення між елементами. У табл. 1 перераховані основні відносні одиниці.
| Одиниця | Опис |
|---|---|
| em | Розмір шрифту поточного елементу |
| ex | Висота символу x |
| px | Пиксел |
| % | Відсоток |
Одиниця em це змінне значення, яке залежить від розміру шрифту поточного елементу (розмір встановлюється через стильову властивість font-size ). В кожному браузері закладений розмір тексту, який застосовується в тому випадку, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за умовчанням або розміром шрифту батьківського елементу. Відсоткова запис ідентична em, в тому сенсі, що значення 1em і 100% рівні.
Одиниця ex визначається як висота символу « x » в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за умовчанням, або до розміру шрифту батьківського елементу.
Пиксел це елементарна точка, яка відображається монітором або іншим подібним пристроєм, наприклад, смартфоном. Розмір пікселя залежить від дозволу пристрою і його технічних характеристик.
Приклад 1
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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>
Абсолютні одиниці
Абсолютні одиниці застосовуються рідше, ніж відносні і зазвичай при роботі з текстом. У табл. 2 перераховані основні абсолютні одиниці.
| Одиниця | Опис |
|---|---|
| in | дюйм (1 дюйм дорівнює 2,54 см) |
| cm | Сантиметр |
| mm | Міліметр |
| pt | пункт (1 пункт дорівнює 1 /72 дюйма) |
| pc | піка (1 піку дорівнює 12 пунктам) |
Найбільш, мабуть, найпоширенішою одиницею є пункт, який використовується для вказівки розміру шрифту. Хоча ми звикли вимірювати все в міліметрах і подібних одиницях, пункт, мабуть, єдина величина з НЕ метричної системи вимірювання, яка використовується у нас повсюдно. І все завдяки текстовим редакторам і видавничим системам.
Приклад 2
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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 ).