Посібник з вибору ідеальних одиниць вимірювання в CSS

CSS (Cascading Style Sheets) пропонує різні способи вказати розміри елементів, тексту та відступів у веб-дизайні. Ці різні одиниці дозволяють вашим веб-сторінкам адаптуватися до різних пристроїв, уподобань користувачів і розмірів екранів. Нижче наведено просте введення в деякі з найпоширеніших одиниць CSS.

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

Абсолютні одиниці в CSS мають фіксований розмір. Вони не змінюються залежно від розміру екрану або інших факторів, таких як базовий розмір шрифту в браузері.

• px (Пікселі): Найбільш поширена одиниця, особливо для вебу. Один піксель відповідає одній крапці на типовому комп'ютерному екрані. Для більшості сучасних інтерфейсів використання px є простим і передбачуваним.
• cm (Сантиметри), mm (Міліметри), in (Дюйми), pt (Пункти), pc (Піка): Хоча це допустимі одиниці CSS, вони рідко використовуються для екранів, оскільки розміри пристроїв і роздільна здатність сильно відрізняються. Ці одиниці можуть бути корисні для стилізації для друку (наприклад, використовуючи сантиметри або дюйми в стилях для друку).

Приклад:

.box {  
 width: 200px;  
 height: 100px;  
}

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

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

• em: Відносно розміру шрифту самого елемента (або його батьківського елемента, якщо розмір шрифту елемента не визначений). Наприклад, якщо розмір шрифту елемента дорівнює 16px, то 1em буде 16px, а 2em буде 32px.
• rem (Root EM): Відносно розміру шрифту кореневого елемента (html). Якщо стандартний розмір шрифту браузера або елемента html дорівнює 16px, то 1rem = 16px, 2rem = 32px і так далі. На відміну від em, rem завжди масштабуються відносно кореневого розміру шрифту, що полегшує підтримку послідовного розміру на вашому сайті.
• % (Відсотки): Відносно розміру батьківського елемента. Наприклад, width: 50%; означає половину ширини батьківського контейнера.

Приклад:

.container {  
 font-size: 16px; /* Базовий розмір шрифту */  
}  
.text {  
 font-size: 2em; /* 2em = 2 × 16px = 32px */  
 margin-bottom: 1rem; /* 1rem = 1 × 16px = 16px */  
 width: 50%; /* 50% від ширини батьківського елемента */  
}

3. Одиниці, що базуються на розмірі вікна

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

• vw (Viewport Width): 1vw дорівнює 1% від ширини вікна перегляду (тобто ширини вікна браузера).
• vh (Viewport Height): 1vh дорівнює 1% від висоти вікна перегляду.
• vmin (Viewport Minimum): Менша з ширини чи висоти поточного вікна перегляду.
• vmax (Viewport Maximum): Більша з ширини чи висоти поточного вікна перегляду.

Ці одиниці особливо корисні для створення секцій на повний екран або для забезпечення того, щоб елементи змінювались відповідно до розміру вікна браузера. Наприклад, можна встановити висоту фону на height: 100vh;, щоб він заповнив весь екран по вертикалі.

Приклад:

.full-section {  
 width: 100vw; /* Заповнює всю ширину вікна перегляду */  
 height: 100vh; /* Заповнює всю висоту вікна перегляду */  
}

px vs rem vs em

4. Як вибрати правильну одиницю

1. Використовуйте px для фіксованих розмірів, коли вам потрібно точно контролювати розмір окремих елементів (наприклад, іконок або зображень).
2. Використовуйте відносні одиниці (em, rem) для тексту та макету, дозволяючи вашому дизайну масштабуватися залежно від уподобань користувача або базового розміру шрифту.
3. Використовуйте одиниці, що базуються на розмірі вікна (vw, vh), коли вам потрібно, щоб елементи змінювались відповідно до розміру вікна браузера, особливо для адаптивних дизайнів.

Висновок

Розуміння, коли і як використовувати кожну одиницю виміру в CSS, є важливим для створення адаптивних і доступних веб-сайтів. Експериментуючи з абсолютними, відносними та одиницями, що базуються на розмірі вікна, ви зможете створити макети, які чудово виглядають на різних пристроях та екранах.

Перекладено з: A Guide to Selecting the Perfect CSS Units