Короткий посібник з одиницями виміру в css, css
Одиниці виміру CSS відіграють важливу роль у створенні сайтів і завданні розмірів різних елементів. Значення CSS можуть бути виражені позитивними або негативними числами, хоча деякі властивості приймають тільки позитивні числа. Числове значення супроводжується дволітерні абревіатурою, яка позначає фактичну одиницю довжини. Наприклад, cm (сантиметри), px (пікселі) або em CSS. Винятком з цього правила є значення 0 (нуль), для якого не потрібно вказувати одиницю виміру.
Одиниці виміру CSS бувають двох типів: абсолютні і відносні.
Абсолютні одиниці вимірювання довжини в CSS
Абсолютні одиниці вимірювання CSS не підходять для веб-дизайну. Вони являють собою цифрове позначення результатів вимірювань у фізичному світі і не залежать від розміру і дозволу екрану. Абсолютні довжини з одним і тим же значенням можуть відрізнятися на різних екранах. Це викликано відмінностями DPI екрану (точок на дюйм).
Екрани з високою роздільною здатністю мають більш високий показник DPI в порівнянні з екранами меншого дозволу, завдяки чому на них зображення і текст виглядають менше. Абсолютні одиниці використовуються при визначенні стилів в поліграфії, де вимірювання відбуваються в дюймах, пунктах та піках.
Більшість абсолютних одиниць довжини марні в інтернеті. Єдиним винятком є px. Пікселі є відносними одиницями по відношенню до вирішення екранів. Для принтерів і моніторів з дуже високою роздільною здатністю один піксель в CSS дорівнює кільком пикселям на екрані, так що число px на дюйм становить близько 96. Піксель є найменшою одиницею виміру і зазвичай використовується в якості орієнтира для інших.
Відносні одиниці вимірювання довжини в CSS
Відносні одиниці вимірювання довжини в CSS не мають фіксованих значень. Їх значення залежать від інших заданих значень або функцій. Вони більш затребувані в веб-дизайні, тому що спрощують визначення розміру елемента. З їх допомогою можна задати ширину, висоту, розмір шрифту і т. Д. Щодо інших основних параметрів.
Відносні одиниці, що залежать від шрифту
Відносні одиниці вимірювання, що залежать від шрифту, посилаються на заздалегідь встановлений розмір шрифту або значення властивості font-family:- ex (висота символу x);
- ch (ширина символу нуль (0));
- одиниця виміру em в CSS (висота шрифту поточного елементу);
- rem (розмір шрифту кореневого елементу).
Визначається як "висота символу x поточного шрифту АБО половина 1 em". Тобто висота малої літери x встановленого шрифту. При зміні значення властивості font-family одиниця виміру ex змінюється.
Дорівнює ширині символу 0. Ця одиниця виміру також змінюється при зміні значення властивості font-family.
Одиниця виміру em CSS має значення, рівне розміру шрифту основного або батьківського елемента. Наприклад, якщо розмір шрифту батьківського елементу 30px. то значення 1em буде обчислюватися як 30px (30 х 1) для всіх дочірніх елементів. Число не обов'язково має бути цілим. Якщо в прикладі замінити 1em на 0,5, то значення буде 15px (30 х 0,5).
Одиниця виміру em приймає значення батьківського тега. Це може привести до небажаних результатів при використанні вкладених один в одного елементів.
Припустимо, що у нас є три вкладених один в одного елемента. Перший елемент (кореневої) має розмір шрифту 30px. а два вкладених елемента - шрифт в 2em. Елемент, вкладений в кореневій, матиме розмір шрифту, який вираховується як 60px (30 х 2). А елемент, вкладений в нього, матиме розмір шрифту, який вираховується як 120px (60 х 2).
rem подібна em CSS. але її значення завжди залишається рівним розміру шрифту кореневого елементу. Одиниця виміру rem стане в нагоді при розробці адаптивних сайтів, тому що дозволяє масштабувати всю сторінку, змінивши розмір шрифту в HTML-елементі.
відсотки%
Відстань, заданий в процентах, залежить від довжини батьківського елемента. Наприклад, якщо батьківський елемент шириною 1000px. а його дочірній елемент - 50% від цього значення, то ширина дочірнього елемента буде 500px.
підтримки браузера
em CSS, ex, px, cm, mm, in, pt, і pc
підтримуються у всіх браузерах, в тому числі і в старих версіях IE.
Всі використовувані браузери, включаючи IE9 +.
vw, vh, і vmin
Chrome 20+. IE 9 +. Firefox 19+. Safari 6 +. Opera 20+. Internet Explorer підтримує Vmin нестандартним синтаксисом vm.
Chrome 20+. Firefox 19+ та 20+ Opera і Safari 6.1+. Немає підтримки в IE.
Переклад статті "THE QUICK GUIDE TO CSS LENGTH UNITS" був підготовлений дружною командою проекту Сайтобудування від А до Я.