Одиниці вимірювання CSS (px, %, em, vw, vh, vmin, vmax) та функція calc. CSS в'юпорт одиниці вимірювання: швидкий старт

Одиниці виміру CSS грають важливу рольу створенні сайтів та завданні розмірів різних елементів. Значення CSSможуть бути виражені позитивними чи негативними числами, хоча деякі властивості приймають лише позитивні числа. Числове значеннясупроводжується дволітерною абревіатурою, яка позначає фактичну одиницю довжини. Наприклад, cm (сантиметри), px (пікселі) або em CSS. Винятком із цього правила є значення 0 (нуль), для якого не потрібно вказувати одиницю виміру.

Одиниці виміру CSS бувають двох типів: абсолютні та відносні.

Абсолютні одиниці вимірювання довжини CSS

Абсолютні одиниці вимірювання CSS не підходять для веб-дизайну. Вони являють собою цифрове позначення результатів вимірювань у фізичному світі і не залежать від розміру та роздільної здатності екрану. Абсолютні довжини з тим самим значенням можуть відрізнятися на різних екранах. Це викликано різницею DPI екрана (точок на дюйм).

Екрани високої роздільної здатності мають більше високий показник DPI в порівнянні з екранами меншого дозволу, завдяки чому на них зображення та текст виглядають менше. Абсолютні одиниці використовуються при визначенні стилів у поліграфії, де вимірювання відбуваються у дюймах, пунктах та піках.

Абсолютні одиниці виміру довжини:

  • cm (сантиметри);
  • mm (міліметри);
  • in (дюйми);
  • pc (піки);
  • pt (пункти);
  • px (пікселі).

Більшість абсолютних одиниць довжини марні в інтернеті. Єдиним винятком є ​​px. Пікселі є відносними одиницями по відношенню до роздільної здатності екранів. Для принтерів та моніторів з дуже високою роздільною здатністюодин піксель CSS дорівнює декільком пікселям на екрані, так що число px на дюйм становить близько 96. Піксель є найменшою одиницею вимірювання і зазвичай використовується як орієнтир для інших.

Відносні одиниці вимірювання довжини CSS

Відносні одиницівимірювання довжини CSS не мають фіксованих значень. Їх значення залежать від інших заданих значеньчи функцій. Вони більш потрібні у веб-дизайні, тому що спрощують визначення розміру елемента. З їх допомогою можна задати ширину, висоту, розмір шрифту тощо щодо інших основних параметрів.

Відносні одиниці, що залежать від шрифту

Відносні одиниці вимірювання, що залежать від шрифту, посилаються на заздалегідь встановлений розміршрифту або значення властивості font-family:

  • ex (висота символу x);
  • ch ( ширина символу нуль (0));
  • одиниця виміру em CSS (висота шрифту поточного елемента);
  • rem ( розмір шрифту кореневого елемента).

ex

Визначається як " висота символу x поточного шрифту АБО половина 1 em”. Тобто висота малі літери x встановленого шрифту. За зміни значення властивості font-family одиниця виміру ex змінюється.

ch

дорівнює ширині символу 0 . Ця одиниця виміру також змінюється за зміни значення властивості font-family .

em

Одиниця виміру em CSS має значення, що дорівнює розміру шрифту основного або батьківського елемента. Наприклад, якщо розмір шрифту батьківського елемента 30px то значення 1em буде обчислюватися як 30px (30 х 1 ) для всіх дочірніх елементів. Число не обов'язково має бути цілим. Якщо приклад замінити 1em на 0,5, то значення буде 15px (30 x 0,5 ).

Одиниця виміру em набуває значення батьківського тега. Це може призвести до небажаних результатів при використанні вкладених один одного елементів.

Припустимо, що у нас є три вкладені один в одного елементи. Перший елемент (кореневий) має розмір шрифту 30px, а два вкладені елементи - шрифт у 2em. Елемент, вкладений у кореневій, матиме розмір шрифту, який обчислюється як 60px (30 х 2 ). А елемент, вкладений у нього, матиме розмір шрифту, що обчислюється як 120px (60 х 2).

rem

rem подібна до em CSS , але її значення завжди залишається рівним розміру шрифту кореневого елемента. Одиниця вимірювання rem стане в нагоді при розробці адаптивних сайтів, тому що дозволяє масштабувати всю сторінку, змінивши розмір шрифту в HTML-елементі .

Процентні одиниці вимірювання довжини, що залежать від розмірів області перегляду

Область перегляду ґрунтується на ширині та висоті вікна перегляду і включає:

  • vh ( висота вікна перегляду);
  • vw ( ширина вікна перегляду);
  • vmin ( найменше з (vw, vh));
  • vmax ( найбільше з (vw, vh)).

vw

Це ширина області перегляду. 1vw дорівнює 1/100 ширини вікна перегляду. Дещо схоже на відсотки, за винятком того, що значення залишається незмінним для всіх елементів незалежно від ширини їхніх батьківських елементів. Наприклад, якщо ширина вікна 1000px, то 1vw дорівнюватиме 10px.

vh

Те ж саме, що і vw ( ширина вікна перегляду), тільки дана одиницяВимірювання залежить від висоти області перегляду. 1vh дорівнює 1/100 висоти перегляду. Наприклад, якщо висота вікна браузера 900px, то 1vh буде 9рх.

vmin

Vmin дорівнює 1/100 від мінімального значенняміж висотою та шириною області перегляду. Інакше кажучи, 1/100 боку із найменшою довжиною. Наприклад, якщо розміри вікна 1200 на 800 пікселів, то значення vmin дорівнюватиме 8px .

vmax

vmax дорівнює 1/100 від максимального значенняміж висотою та шириною вікна перегляду. Іншими словами, 1/100 сторони з найбільшою довжиною. Наприклад, якщо розміри були 1200 на 800 пікселів, то vmax дорівнює 12px.

Відсотки %

Відстань, задану у відсотках залежить від довжини батьківського елемента. Наприклад, якщо батьківський елемент шириною 1000px, а його дочірній елемент - 50% від цього значення, то ширина дочірнього елементабуде 500px.

ПІДТРИМКА БРАУЗЕРАМИ

em CSS, ex, px, cm, mm, in, pt, та pc

підтримуються у всіх браузерах, у тому числі й у старих версіях IE.

У CSS3 з'явилися нові одиниці виміру. (Я, здається, вже про це говорив. eng) Ви вже чули про px, pt, em та нових rem. Давайте розглянь ще кілька: vw і vh.

Часто в макеті є елементи, які гарантовано повинні вміщуватись у в'юпорт браузера. У випадку для цього використовується JavaScript. Перевіримо розмір в'юпорту та змінюємо розміри елементів відповідним чином. Якщо користувач змінює розмір вікна браузера, процедура повторюється.

За допомогою vw/vh ми можемо встановлювати розмір елементів щодо розміру в'юпорт. Одиниці vw/vh цікаві тим, що 1vw - одиниця рівна 1/100"ой ширини вьюпорта. Щоб привласнити елементу ширину, рівну ширині вьюпорта, наприклад, треба встановити width:100vw.

Як це можна використовувати

Лайтбокси - чудовий кандидат для використання vw і vh, тому що зазвичай позиціонується щодо в'юпорту, проте мені здається, що position:fixed зі значеннями top, bottom, left і right використовувати простіше, тому що можна взагалі не встановлювати висоту та ширину.

Можна використовувати нові одиниці вимірювання для встановлення розмірів елементів, які знаходяться у нормальному потоці. Наприклад, я можу розмістити на сторінці скріншоти. Висота цих скріншотів не повинна перевищувати висоту в'юпорту. Для цього я можу встановити максимальну висоту зображень:

Img (max-height:95vh; )

У даному випадкуя встановлюю висоту 95vh щоб залишити трохи місця навколо, коли вони на екрані.

Підтримка браузерами

Якщо rem підтримуються майже всіма основними браузерами, включаючи IE9, то з використанням vw і vh варто почекати. на Наразіїх підтримує тільки Internet Explorer 9.

Від автора:з першого показу в'юпорт одиниць у CSS пройшло кілька років. Це реально адаптивні одиниці виміру довжини, їхнє значення змінюється під розміри вікна браузера. Якщо ви чули про них, але ніколи не вдавалися до деталей, ця стаття для вас.

Одиниці виміру та їх значення

У CSS є 4 типи в'юпорт одиниць: vh, vw, vmin і vmax.

Viewport height (vh) - засновані на висоті в'юпорт. Значення 1vh дорівнює 1% висоти вьюпорт.

Viewport width (vw) – засновані на ширині в'юпорт. Значення 1vw дорівнює 1% ширини в'юпорт.

Viewport minimum (vmin) – засновані на мінімальному боці в'юпорту. Якщо висота в'юпорту менше ширини, значення 1vmin дорівнюватиме 1% від висоти. Так само якщо ширина менше висоти, то 1vmin дорівнюватиме 1% від ширини вьюпорта.

Viewport maximum (vmax) – засновані на великій стороні в'юпорт. Якщо висота в'юпорту більше ширини, то значення 1vmax дорівнюватиме 1% від висоти вьюпорта. Якщо ширина вьюпорта більше висоти, то 1vmax дорівнюватиме 1% від ширини.

Давайте подивимося, які значення ми отримаємо у різних ситуаціях:

Якщо в'юпорт 1200px завширшки і 1000px заввишки, то значення 10vw дорівнюватиме 120px, а 10vh – 100px. Ширина вьюпорта більше висоти, тому 10vmax дорівнюватиме 120px, а 10vmin - 100px.

Якщо повернути пристрій, щоб ширина стала 1000px, а висота 1200px, то 10vh дорівнюватиме 120px, а 10vw перетвориться на 100px. Цікаво, але 10vmax так і залишиться 120px, тому що тепер значення визначається за висотою в'юпорту. Значення 10vmin також залишиться 100px.

Якщо звузити вікно браузера до 1000px завширшки і 800px заввишки, то 10vh буде 80px, а 10vw буде 100px. Так само значення 10vmax стане 100px, і 10vmin - 80px.

На даний момент в'юпорт одиниці для вас можуть не дуже відрізнятися від відсотків, проте різниця велика. Що стосується відсотками ширина і висота дочірніх елементів залежить від батьківського блоку. Приклад:

Демо видно, як ширина першого дочірнього елемента займає 80% ширини від батька. У другого дочірнього елемента ширина дорівнює 80vw, що робить його ширшим за батька.

Застосування в'юпорт одиниць виміру

Ці одиниці засновані на розмірах в'юпорту, тому їх дуже зручно використовувати в ситуаціях, коли ширина, висота або розміри елементів повинні змінюватись в залежності від розмірів в'юпорту.

Повноекранні фонові зображення та секції

У мережі часто можна зустріти фонові зображення на елементах, які займають весь екран. Так само можна зробити в дизайні сайту, щоб окрема секція про товар або послугу займала весь екран. У таких випадках можна задати ширину елементів 100%, а висоту 100vh.

Розберемо наступний приклад HTML:

a

< div class = "fullscreen a" >

< p >a< p >

< / div >

CSS нижче розтягне секцію під фонове зображення на всю ширину:

Fullscreen ( width: 100%; height: 100vh; padding: 40vh; ) .a ( background: url("path/to/image.jpg") center/cover; )

Fullscreen (

width: 100%;

height: 100vh;

padding: 40vh;

background: url ("path/to/image.jpg") center/cover;

Ідеально підходящі заголовки

Ви могли чути або навіть використати jQuery плагін FitText. За допомогою цього плагіна можна масштабувати заголовки так, щоб вони займали всю ширину батьківського елемента. Як я сказала раніше, значення в'юпорт одиниць безпосередньо залежить від розмірів в'юпорт. Тобто якщо вказувати font-size заголовків у в'юпорт одиницях, то вони будуть ідеально підходити під кожен екран. Якщо зміниться ширина в'юпорту, браузер автоматично змінить заголовок. Потрібно лише визначити правильне первісне значеннядля font-size.

Головна проблемаз font-size і в'юпорт одиницями полягає в тому, що розмір тексту буде сильно змінюватись в залежності від в'юпорту. Наприклад, font-size зі значенням 8vw зробить заголовок розміром 96px для вьюпорта з шириною 1200px, 33px для ширини в 400px і 154px для ширини вьюпорта в 1920px. Шрифт може бути як занадто великим, так і занадто маленьким для зручного читання. Детальніше прочитати про правильної установкирозмірів тексту за допомогою одиниць виміру та функції calc() можна у чудовій статті про друкарні на в'юпорт одиницях.

Легке центрування елементів

В'юпорт одиниці можуть дуже допомогти, коли необхідно помістити елемент точно в цент екрана користувача. Якщо висота елемента відома, потрібно лише задати верхнє і нижнє значення властивості margin в [(100 - height)/2]vh.

Centered (

width: 60vw;

height: 70vh;

margin : 15vh auto ;

Що потрібно пам'ятати

Якщо ви вирішили використати в'юпорт одиниці у своїх проектах, вам потрібно пам'ятати про кілька речей.

Я згадувала нові (щодо) одиниці виміру. Ці одиниці – vw, vh, vmin та vmax, вони засновані на розмірі в'юпорту браузера. Їх фактичний розмір змінюється в залежності від зміни області перегляду браузера, що робить ці одиниці ідеальними для адаптивного дизайну. Хоча в моєму попередньому пості я виступила проти використання цих одиниць для вказівки розмірів шрифту, вони можуть бути дуже корисними для роботи з елементами макета.

Одиниці виміру viewport

Одиниці вимірювання viewport є відносними одиницями, це означає, що вони не можуть бути об'єктивно вимірювані. Їх розмір визначається розміром області перегляду у браузері. Існують чотири одиниці, які стосуються області перегляду.

Я сконцентрую увагу на перших двох, тому що вони найчастіше використовуються. В багатьох випадках одиниці viewport(vh і vw) перетинаються з відсотками щодо можливостей. Тим не менш, кожна з них має свої сильні та слабкі сторони.

Якщо резюмувати, то вийде таке:

Коли маєш справу з шириною, то краще підходять %, а якщо з висотою, то краще за vh.

Елементи на всю ширину сторінки: % > vw

Як я вже казала vw визначає розмір елемента виходять із ширини viewport. Проте браузери розраховують розмір з урахуванням місця для скроллбару.

Якщо ширина сторінки перевищує ширину viewport, з'являється смуга прокручування. Однак насправді ширина viewport більша, ніж ширина елемента html

Viewport > html > body

Тому якщо ви встановите ширину елемента 100vw, то елемент вийде за межі html і body. в даному прикладія зробила червону межу навколо елемента HTML і залила розділи різними кольорами.

Через цей нюанс робити елементи на всю ширину сторінки краще за допомогою відсотків, а не спираючись на ширину viewport.

Елементи на всю висоту сторінки: vh > %

При створенні елементів, висота яких повинна дорівнювати висоті сторінки набагато краще використовувати vh замість відсотків. Оскільки розмір елемента, що визначається у відсотках, задається відносного його батьківського елемента, ми можемо отримати елемент заввишки рівною висотіЕкран тільки якщо його батьківський елемент так само займає всю висоту екрана. Це означає, що ми повинні спозиціонувати елемент як фіксований для того, щоб зробити елемент htmlбатьківським, або вдатися до використання якогось хаку.

Використовуючи vh досягти такого ефекту досить просто:

Example ( height: 100vh; )

Незалежно від того, як вкладено елемент.example, його розміри можуть бути задані щодо розмірів області перегляду. Проблема прокручування не потурбує нас, оскільки більшість сайтів не мають горизонтального скроллбару.

Ось кілька прикладів того, як можна використовувати одиниці виміру vh.

Повноекранні фонові зображення

Типове використання одиниці виміру vh – для створення фонового зображення, що охоплює всю висоту та ширину екрана, незалежно від розміру пристрою. Зробити це досить просто.

Bg ( position: relative; background: url("bg.jpg") center/cover; width: 100%; height: 100vh; )

Аналогічно ми можемо зробити ефект сторінок, задавши кожному розділу розміри області перегляду.

Section ( width: 100%; height: 100vh; )

Ми можемо використовувати JavaScript, щоб створити ілюзію перегортання сторінок.

$("nav").on("click", function() ( if ($(this).hasClass("down"))) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("up")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animate(( scrollTop: movePos ), 1000); ))

Складне зображення

Vh також може використовуватися для контролю розміру зображення в межах сторінки. Наприклад, у межах статті. Ми хочемо переконатися, що будь-яке зображення буде показане повністю незалежно від розміру екрана.

Нам знадобиться наступний код

Img ( width: auto; /* Автоматична ширина для пропорційності висоти */ max-width: 100%; /* Не більше ширини батьківського елемента */ max-height: 90vh; /* Не перевищуючи висоту viewport */ margin: 2rem auto; )

Підтримка браузерами

Оскільки дані одиниці виміру є відносно новими, як і раніше існують проблеми під час роботи з певними браузерами.

Ось як їх можна вирішити.

Для завдання розмірів різних елементів CSS використовуються абсолютні і відносні одиниці вимірювання. Абсолютні одиниці не залежить від пристрою виведення, а відносні одиниці визначають розмір елемента щодо значення іншого розміру.

Відносні одиниці

Відносні одиниці зазвичай використовують із роботи з текстом. У табл. 1 перераховано основні відносні одиниці.

Одиниця em це змінне значеннящо залежить від розміру шрифту поточного елемента (розмір встановлюється через стильову властивість font-size). У кожному браузері закладено розмір тексту, застосовуваний у разі, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в стандартному браузері або розміру шрифту батьківського елемента. Процентна запис ідентична em , тому, що значення 1em і 100% рівні.

Одиниця ex визначається як висота символу "x" в нижньому регістрі. На ex поширюються самі правила, як і для em , зокрема, він прив'язаний до розміру шрифту, заданого в браузері за промовчанням, чи розміру шрифту батьківського елемента.

Одиниця ch дорівнює ширині символу "0" для поточного елемента і подібно до em залежить від розміру шрифту.

Різниця між em та rem наступна. em залежить від розміру шрифту батька елемента і змінюється разом з ним, а rem прив'язаний до кореневого елемента, тобто розміру заданого шрифту для елемента html .

Також є група відносних одиниць, прив'язаних до розміру області перегляду браузера. У табл. 2 показаний їх список із описом.

Абсолютні одиниці

Абсолютні одиниці є фізичні розміри- Дюйми, сантиметри, міліметри, пункти, піки, а також пікселі. Для пристроїв з низьким dpi (кількість точок, що припадають на один дюйм, визначає щільність точок), прив'язка йде до пікселя. У цьому випадку один дюйм дорівнює 96 пікселів. Очевидно, що реальний дюйм не співпадатиме з дюймом на такому пристрої. На пристроях з високим dpi реальний дюйм збігається із дюймом на екрані, тому розмір пікселя обчислюється як 1/96 від дюйма. У табл. 3 перераховано основні абсолютні одиниці.

приклад

Відносні одиниці

Заголовок розміром 30 пікселів

Розмір тексту 1.5 em



Абсолютні одиниці

Заголовок розміром 24 пункти

Зсув тексту праворуч на 30 міліметрів



Примітка

При установці розмірів обов'язково вказуйте одиниці виміру, наприклад width: 30px. В іншому випадку браузер не зможе показати бажаний результат, оскільки не розуміє, який розмір вам потрібний. Одиниці не додаються тільки за нульовому значенні(Margin: 0).

Internet Explorer підтримує одиницю vm замість vmin.

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) - специфікація схвалена W3C та рекомендована як стандарт.
  • Candidate Recommendation ( Можлива рекомендація ) - група, відповідальна за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.
  • Proposed Recommendation ( Пропонована рекомендація) - на цьому етапі документ подано на розгляд Консультативної ради W3C для остаточного затвердження.
  • Working Draft (Робочий проект) - більш зріла версія чернетки після обговорення та внесення поправок для розгляду спільнотою.
  • Editor"s draft ( Редакторська чернетка) - Чорнова версія стандарту після внесення правок редакторами проекту.
  • Draft ( Чернетка специфікації) – перша чорнова версія стандарту.
×

ПОХОДЖЕННЯ СТАТТІ