7 Одиниць css про які ви повинні знати

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

МАГАЗИН Лендінзі УНІВЕРСИТЕТ АКЦІЇ ВІД ПАРТНЕРІВ

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

У міру того, як зростає Інтернет, зростає і попит на нові рішення. А якщо вже ми з вами є веб-дизайнерами і розробниками фронтенда, у нас немає іншого вибору, як вміти працювати з різними опціями і вміти працювати добре.

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

Сьогодні ми хотіли б вам розповісти про деякі інструментах CSS. Кожен з цих інструментів як одиниця виміру, типу пікселя або ems, але ви про них, швидше за все, не знали.

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

Тут ми написали, що у div font-size дорівнюватиме 1.2em. Це в 1,2 рази більше ніж font-size, у якого він успадкував, він становив 14px. Таким чином, результат 16.8px.

Однак, що станеться, якщо ви каскадом розташуйте визначаються em font-size всередині один одного? У наступному уривку ми застосовує той же самий CCS, що і вище. Кожен div успадковує font-size від свого батька, видаючи нам поступово збільшуються розміри шрифту.

Не дивлячись на те, що це може підійти в деяких випадках, часто ми хочемо просто покладатися на єдину метрику для вимірювання. У цьому випадку ми повинні використовувати rem. "R" в rem позначає "корінь"; він дорівнює набору розміру шрифту в елементі кореня; в більшості випадків він є елементом HTML.

У всіх трьох div з попереднього прикладу, шрифт може досягати 16.8px.

Rem корисні не тільки в калібрування шрифту. Наприклад, ми могли б базувати всю систему grid або бібліотеку UI по використанню розміру шрифту HTML кореня rem, і використовувати їх обчислення в певних місцях. Це дало б нам більш передбачувану калібрування шрифту і обчислення.

Концепт ідеї полягає в тому, щоб дозволити нашому інтерфейсу бути порівнянним з розміром контенту. Хоча не обов'язково, щоб у кожному взятому випадку це мало однаковий сенс.

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

Припустимо, ви хочете зробити заголовок, який заповнить всю ширину екрану. Щоб зробити це, вам необхідно встановити font-size в vw. Цей розмір буде порівняємо з шириною браузера.

У яких випадках ви зможете використовувати ці значення?

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

Одиниці ex і ch, так само як em і rem, співвідносяться з current font та font size. Однак, оскільки вони засновані на певних для шрифту заходи, ex і ch також співвідносяться з font-family, на відміну від em і rem.

Одиниця ch або одиниця character, визначається як «поліпшена міра» ширини знака 0. Це поняття викликало багато суперечок, але основна ідея полягає в тому, що володіючи шрифтом фіксованої ширини, квадрат з шириною N знаками одиниць, таких як width: 40ch; можуть завжди містити послідовність з 40 знаків в цьому конкретному шрифті. У той час як звичайне використання цього особливого правила полягає в розташуванні шрифту Брайля, можливості для креативності тут, звичайно, простягаються поза цих простих заяв.

Одиниця ex визначається як «х-висота поточного шрифту АБО одна-друга від em». Thex-висота даного шрифту - висота малих літер x того шрифту. Найчастіше, це приблизно в середній позначці шрифту.

Існує багато областей, де можуть використовуватися подібні одиниці. Найчастіше в друкарні. Наприклад, елемент sup, який виступає як superscript, може бути доданий в рядок, використовуючи відповідну позицію і кінцеве значення 1ex. Точно так же ви можете скинути нижній елемент. Помилки браузера виправляються правилами superscript- і subscript-specific vertical-align, але якщо ви хочете більше контролю, ви можете спробувати наступне:

LPgenerator - професійна Landing Page платформа для збільшення продажів вашого бізнесу

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.