текст перекладу
grok generated image
У веб-розробці вибір одиниць вимірювання є ключовим для забезпечення якості та гнучкості сайту або додатку. Хоча пікселі (px) довгий час використовувались як стандартна одиниця вимірювання, сьогодні краще їх уникати на користь більш гнучких альтернатив, таких як відносні одиниці (em, rem, %, vw, vh) або сучасні одиниці, як ch і vmin. У цій статті ми розглянемо причини, чому використання пікселів слід обмежити, наводячи практичні приклади та пояснення для кожної одиниці вимірювання.
🔗 Вам подобається Techelopment? Перегляньте сайт для всіх деталей!
1. Погана масштабованість на різних пристроях
Пікселі є абсолютною одиницею, що означає, що вони не підлаштовуються автоматично під розміри або роздільність екрана. Зі збільшенням кількості пристроїв, що доступні, дизайн, заснований на пікселях, може виявитися не оптимальним.
Практичний приклад: Припустимо, ми маємо контейнер з шириною, визначеною в пікселях:
.container {
width: 300px;
}
На маленькому екрані, наприклад, на смартфоні, цей контейнер може виявитися занадто великим. Натомість можна використати відсоток %:
.container {
width: 50%;
}
% означає відсоток від розміру батьківського елемента. У наведеному прикладі контейнер матиме ширину, що дорівнює 50% від ширини його батьківського елемента, автоматично підлаштовуючись під доступні розміри.
2. Зменшена доступність
Визначення розміру тексту в пікселях може завадити користувачам змінювати розмір шрифта, що обмежує зручність читання.
Практичний приклад: Визначаючи font-size в пікселях:
p {
font-size: 16px;
}
Користувачі не зможуть збільшити або зменшити текст за допомогою налаштувань браузера. Натомість, використовуючи rem:
p {
font-size: 1rem;
}
rem базується на розмірі шрифта кореневого елемента html. Наприклад, якщо елемент html має font-size 16px, то 1rem дорівнює 16px. Це робить дизайн масштабованим, оскільки при зміні font-size елемента html всі розміри, визначені в rem, оновлюються відповідно.
html {
font-size: 18px; /* Змінивши це значення, весь текст адаптується */
}
p {
font-size: 1rem; /* У цьому випадку 18px */
}
3. Проблеми з щільністю пікселів (DPI)
Сучасні пристрої, такі як смартфони з екранами високої щільності (ретина), відображають пікселі по-різному, ніж традиційні монітори. Це може зробити елементи, визначені в пікселях, занадто малими або важкими для сприйняття.
Практичний приклад: Кнопка, визначена в пікселях:
button {
width: 100px;
height: 30px;
}
Вона може виглядати дуже маленькою на пристрої з високою щільністю пікселів, тому краще використовувати em:
button {
width: 10em;
height: 3em;
}
em — це відносна одиниця, що базується на розмірі шрифта батьківського елемента. Якщо font-size батьківського елемента дорівнює 16px, то 1em дорівнює 16px. Використовуючи em, розміри кнопки адаптуються динамічно до контексту, в якому вона знаходиться.
Приклад контексту:
.parent {
font-size: 20px;
}
button {
width: 10em; /* Рівно 200px (20px * 10) */
height: 3em; /* Рівно 60px (20px * 3) */
}
4. Відсутність плавності в адаптивних макетах
Адаптивний макет повинен підлаштовуватися під екрани всіх розмірів. Використання пікселів для визначення ширини, висоти або відступів може зробити дизайн жорстким.
Практичний приклад: Макет з фіксованою шириною:
.container {
width: 800px;
}
Це буде занадто широким на маленьких екранах.
текст перекладу
У таких випадках слід використовувати одиниці, що базуються на розмірах вікна перегляду (viewport), як vw:
.container {
width: 80vw; /* 80% від ширини вікна перегляду */
}
vw означає 1% від ширини вікна перегляду (видимої частини браузера). Наприклад, якщо ширина вікна перегляду становить 1000px, то 1vw дорівнює 10px. Це дозволяє елементам пропорційно підлаштовуватися під ширину екрану.
5. Краща підтримка адаптивних та гнучких дизайнів
Відносні одиниці дозволяють зберігати узгоджені пропорції та створювати макети, які динамічно підлаштовуються.
Практичний приклад: Визначення розміру тексту в пікселях може призвести до неузгодженості дизайну:
h1 {
font-size: 24px;
}
p {
font-size: 16px;
}
Якщо змінюється базовий font-size, ці розміри залишаються незмінними. Натомість, використовуючи rem:
h1 {
font-size: 1.5rem; /* 1.5 рази розміру базового шрифта */
}
p {
font-size: 1rem; /* Рівно з розміром базового шрифта */
}
Використовуючи відносні одиниці, як rem, пропорції залишаються узгодженими навіть при зміні font-size елемента html.
6. Комбіновані приклади використання гнучких одиниць
Для повністю адаптивного макету можна комбінувати відносні одиниці та одиниці на основі вікна перегляду.
Практичний приклад: Визначаємо контейнер і текст із гнучким дизайном:
html {
font-size: 16px; /* Базовий шрифт */
}
.container {
width: 90%;
max-width: 1200px;
padding: 2rem;
}
h1 {
font-size: 2rem; /* Вдвоє більше за базовий шрифт */
}
p {
font-size: 1rem;
line-height: 1.5; /* Покращує читабельність */
}
Пояснення використаних одиниць:
%: Робить макет гнучким, підлаштовуючи його до ширини батьківського елемента.rem: Дозволяє масштабувати пропорційно до базового розміру шрифта.line-height: Визначене як відносне число (1.5), допомагає зберігати зручну висоту рядків, незалежно від розміру шрифта.
Що потрібно пам'ятати
Уникнення пікселів у стилях CSS — це вибір, який покращує доступність, масштабованість і гнучкість дизайну. Перехід до відносних одиниць або одиниць на основі вікна перегляду дозволяє створювати плавні і зручні для користувачів досвіди, що підходять для різних пристроїв. Сподіваюся, завдяки практичним прикладам і поясненням, вам буде легше зрозуміти, як використовувати ці одиниці для покращення ваших веб-проектів.
Слідкуйте за мною #techelopment
Офіційний сайт: www.techelopment.it
Medium: @techelopment
dev.to (англійською): @techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment
Перекладено з: I pixel in CSS andrebbero evitati e ti spiego perchè