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

Відео: CSS3: одиниці виміру em, rem, vh, vw, vmin, vmax

Відео: Уроки CSS. Відносні одиниці вимірювання в CSS: px,%, em. rem

У цій статті я хочу розповісти про всі можливі одиницях виміру в CSS. У більшості випадків використовують 1, 2, максимум 3, однак, бути знайомими з усіма одиницями вимірювань все-таки варто, і в цьому Вам допоможе ця стаття.

Для початку давайте розберемо, що таке одиниці вимірювань:

Відео: 034. CSS: Значення і одиниці вимірювання. Шрифт. Властивості тексту - Вадим Пацев

p { 
 font-size:14pt- 
}

Саме так pt - це приклад одиниці вимірювань. Ми задали розмір шрифту 14 пунктів, давайте розберемо, які ще є одиниці вимірювань в CSS:

позначення	опис
px	Пікселі. Піксель - це сама маленький об`єкт, помітний на екрані монітора.
em	Розмір в em В залежності від того розміру шрифту. якщо стоїть 1.5em, значить, даний розмір в 1.5 рази більше, ніж розмір шрифту в даному елементі.
%	Аналог em, але 100% - це 12pt. Також відсотки дозволяють легко масштабувати розміри під різні пристрої.
ex	1ex - це висота малої "х"У поточного шрифту.
pt	пункти. 1 пункт - це 1/72 дюйма.
sm	Розмір в сантиметрах.
mm	Розмір в міліметрах.
in	дюйми. 1 дюйм - це 2.54 см.
pc	піки. 1 піку - це 12 пунктів.

Зверніть увагу, що перші 4 одиниці вимірювань - відносні, а наступні 5 - абсолютні. Я настійно рекомендую використовувати тільки відносні розміри (за рідкісним винятком), так як вони масштабуються, і сайт буде виглядати на самих різних дозволах нормально. На практиці Ви будете використовувати 2-3 одиниці вимірювань, однак, якщо раптом Ви зустрінете, наприклад, піки, то тепер будете знати, що це таке.

Поділися в соціальних мережах:

Схожі