Посібник підрозділу CSS: Пояснення CSS em, rem, vh, vw та багато іншого

Програмування

Одиниці

Багато властивості CSS подобається width, margin, padding, і font-sizeт.д. прийняти довжину. CSS має спосіб виразити довжину в декількох одиницях. Довжина - це комбінація числа та одиниці без пробілів. Наприклад 5px, 0.9emтощо.

Довжина

Одиниці загальної довжини

Існує кілька одиниць, що використовуються CSS для вираження довжини. Старіші, які підтримуються всіма браузерами, це:

  • rem - “r” означає “root”: “root em” -, що дорівнює розміру шрифту, зафіксованому на кореневому елементі (майже завжди).
  • vh та vw - Багато прийомів адаптивного веб-дизайну значною мірою покладаються на правила відсотків. Однак відсоткові показники CSS не завжди є найкращим рішенням для всіх проблем. Міра vh дорівнює 1/100 висоти області перегляду. Так, наприклад, якщо висота браузера становить 800 пікселів, 1vh дорівнює 8px, і, аналогічно, якщо ширина області перегляду становить 650px, 1vw еквівалентна 6.5px.
  • Vmin і Vmax - Ці одиниці пов'язані з максимальним або мінімальним значенням ОГО і VW . Наприклад, якби для браузера було встановлено ширину 1200 пікс. Та висоту 600 пікс., 1vmin буде 6px, а 1vmax - 12px. Однак, якщо ширину встановити на 700px, а висоту встановити на 1080px, vmin дорівнює 7px, а vmax - 10.8px.
  • ex і ch - ці одиниці, подібно до em і rem , покладаються на поточний шрифт та розмір шрифту. Однак, на відміну від em і rem , ці одиниці також покладаються,font-familyоскільки вони визначаються на основі заходів, характерних для кожного шрифту. Ч одиниця ( «символ одиниця») визначається як ширина символу нуль ( «0»). Ех одиниця визначаються як «поточні х висоти поточного шрифту або половини 1em». Висота-х даного шрифту - це висота нижнього регістру "х" цього шрифту. Часто це середня позначка шрифту.

Існує два загальних типи одиниць, що використовуються для довжини та розміру в CSS: відносна та абсолютна.

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

Відносні одиниці змінюються відносно поточного розміру шрифту та інших параметрів елемента. Деякі відносні одиниці є

em

  • ширина великої літери M font-sizeпоточного елемента.
  • Розміри шрифтів успадковуються від батьківських елементів.

Приклад:

div { font-size: 16px; } div h3 { font-size: 2rem; }

Ось

буде рівним, 32pxоскільки font-sizeпоточний або батьківський елемент дорівнює 16px.

rem

  • корінь emабо ширина великої літери М основи за замовчуванням font-size.
  • Батьківські розміри шрифтів не вплинуть.

Приклад:

body { font-size: 16px; } p { font-size: 1.5rem; }

Ось

буде рівним, 24pxоскільки базовою базою за замовчуванням font-sizeє 16px.

%

  • відсоток розміру щодо розміру батьків.

Приклад:

div { width: 400px; } div p { width: 75%; }

Оскільки батьківська ширина дорівнює 400px, ширина внутрішнього абзацу буде 300px, або 75% 400px.

vw

  • ширина перегляду або 1/100 від ширини області перегляду

Приклад:

body { width: 100vw; }

bodyЗаповнення ширина вікна перегляду, незалежно від того , що є 417px, 690px, або будь-якої ширини.

vh

  • висота перегляду або 1/100 від висоти вікна перегляду

Приклад:

div { height: 50vh; }

Це divзаповнить половину висоти області перегляду, будь то 1080px, 1300px або будь-яка висота.

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

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

px

  • піксель
  • кількість пікселів залежить від якості екрану пристрою перегляду

in, cm,mm

  • дюйм, сантиметр, міліметр
  • Дюйм - це дюйм на маленькому або великому екрані

pt, pc

  • очок (1/72 дюйма) та пікасів (12 очок)

Приклад

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

Абзац із font-size: 24pxсимволом відображатиметься як 24 пікселі на екрані телефону, планшета чи робочого столу.

Відображення divвідображатиметься як 3 дюйми в ширину, а borderна екрані divбуде товщиною 3/72 дюйма, незалежно від розміру екрану.