Конвертер PX в REM та EM: Калькулятор CSS одиниць
Перетворюйте між пікселями (PX), кореневими em (REM) та em (EM) одиницями CSS за допомогою цього простого калькулятора. Необхідно для адаптивного веб-дизайну та розробки.
Конвертер одиниць PX, REM та EM
Конвертуйте між пікселями (PX), кореневими em (REM) та em (EM). Введіть значення в будь-якому полі, щоб побачити еквівалентні значення в інших одиницях.
Формули конвертації
- PX в REM: значення в px ÷ розмір шрифту кореня
- PX в EM: значення в px ÷ розмір шрифту батьківського елемента
- REM в PX: значення в rem × розмір шрифту кореня
- EM в PX: значення в em × розмір шрифту батьківського елемента
Документація
PX, REM та EM Конвертер одиниць: Основні одиниці CSS пояснені
Вступ до конвертації одиниць CSS
Розуміння та конвертація між одиницями CSS є важливими для адаптивного веб-дизайну та розробки. Одиниці PX (піксель), REM (кореневий em) та EM є основними будівельними блоками, які визначають, як елементи розмірюються та розташовуються на різних пристроях та розмірах екранів. Цей комплексний інструмент конвертації одиниць дозволяє вам легко перетворювати значення між цими трьома критично важливими одиницями CSS, допомагаючи створювати більш гнучкі та підтримувані веб-розкладки.
Пікселі (PX) є одиницями фіксованого розміру, які забезпечують точний контроль, але не мають масштабованості, тоді як одиниці REM масштабується відносно розміру шрифту кореневого елемента, а одиниці EM масштабується відносно розміру шрифту їх батьківського елемента. Конвертація між цими одиницями може бути складною, особливо при роботі зі складними дизайнами або при підтримці функцій доступності, таких як зміна розміру тексту. Наш конвертер PX, REM та EM спрощує цей процес, дозволяючи вам зосередитися на створенні красивих, адаптивних дизайнів.
Розуміння одиниць CSS: PX, REM та EM
Що таке пікселі (PX)?
Пікселі (PX) є найосновнішою та найпоширенішою одиницею CSS. Піксель — це одна точка в решітці цифрового зображення і представляє найменший контрольований елемент на екрані. У CSS пікселі забезпечують одиницю виміру фіксованого розміру, яка залишається незмінною незалежно від інших факторів стилізації.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Ключові характеристики пікселів:
- Одиниці фіксованого розміру, які не масштабується автоматично
- Забезпечують точний контроль над розмірами елементів
- Легко зрозуміти та візуалізувати
- Менш ідеальні для адаптивного дизайну та доступності
Що таке одиниці REM?
Одиниці REM (кореневий em) є відносними одиницями, які масштабується на основі розміру шрифту кореневого елемента (зазвичай елемента <html>). За замовчуванням більшість браузерів встановлюють розмір шрифту кореня на 16px, що робить 1rem рівним 16px, якщо не змінено.
1html {
2 font-size: 16px; /* За замовчуванням у більшості браузерів */
3}
4
5.element {
6 width: 12.5rem; /* Еквівалентно 200px з розміром шрифту кореня за замовчуванням */
7 font-size: 1rem; /* Еквівалентно 16px */
8 margin: 0.625rem; /* Еквівалентно 10px */
9}
10Ключові характеристики одиниць REM:
- Масштабується відносно розміру шрифту кореневого елемента
- Підтримують послідовні пропорції в документі
- Підтримують кращу доступність через глобальні коригування розміру шрифту
- Ідеальні для адаптивних макетів та типографіки
Що таке одиниці EM?
Одиниці EM є відносними одиницями, які масштабується на основі розміру шрифту їх батьківського елемента. Якщо для батьківського елемента не вказано розмір шрифту, EM буде посилатися на успадкований розмір шрифту.
1.parent {
2 font-size: 20px;
3}
4
5.child {
6 font-size: 0.8em; /* Еквівалентно 16px (20px × 0.8) */
7 margin: 0.5em; /* Еквівалентно 8px (16px × 0.5) */
8}
9Ключові характеристики одиниць EM:
- Масштабується відносно розміру шрифту їх батьківського елемента
- Створюють каскадний ефект при вкладенні
- Корисні для створення пропорційних дизайнів у компонентах
- Можуть стати складними для управління з глибоко вкладеними елементами
Формули та обчислення конвертації
Розуміння математичних відносин між одиницями PX, REM та EM є вирішальним для точних конвертацій. Ось формули, що використовуються в нашому конвертері:
Конвертація PX в REM
Щоб конвертувати пікселі в одиниці REM, поділіть значення пікселів на розмір шрифту кореня:
Наприклад, з розміром шрифту кореня за замовчуванням 16px:
- 16px = 1rem
- 24px = 1.5rem
- 8px = 0.5rem
Конвертація PX в EM
Щоб конвертувати пікселі в одиниці EM, поділіть значення пікселів на розмір шрифту батьківського елемента:
Наприклад, з розміром шрифту батька 16px:
- 16px = 1em
- 24px = 1.5em
- 8px = 0.5em
Конвертація REM в PX
Щоб конвертувати одиниці REM в пікселі, помножте значення REM на розмір шрифту кореня:
Наприклад, з розміром шрифту кореня за замовчуванням 16px:
- 1rem = 16px
- 1.5rem = 24px
- 0.5rem = 8px
Конвертація EM в PX
Щоб конвертувати одиниці EM в пікселі, помножте значення EM на розмір шрифту батьківського елемента:
Наприклад, з розміром шрифту батька 16px:
- 1em = 16px
- 1.5em = 24px
- 0.5em = 8px
Конвертація REM в EM
Щоб конвертувати одиниці REM в одиниці EM, вам потрібно врахувати як розмір шрифту кореня, так і розмір шрифту батьківського елемента:
Якщо розміри шрифту кореня та батька однакові (наприклад, 16px), то 1rem = 1em.
Конвертація EM в REM
Щоб конвертувати одиниці EM в одиниці REM, використовуйте наступну формулу:
Знову ж таки, якщо обидва розміри шрифтів однакові, то 1em = 1rem.
Як користуватися конвертером одиниць PX, REM та EM
Наш інструмент конвертера дозволяє легко перетворювати значення між одиницями PX, REM та EM. Ось покрокове керівництво щодо ефективного використання конвертера:
Основне використання
- Введіть значення в будь-яке поле введення (PX, REM або EM)
- Конвертер автоматично обчислить та відобразить еквівалентні значення в інших двох одиницях
- Налаштуйте розмір шрифту кореня (за замовчуванням: 16px), щоб побачити, як це вплине на конверсії REM
- Налаштуйте розмір шрифту батька (за замовчуванням: 16px), щоб побачити, як це вплине на конверсії EM
- Використовуйте кнопку копіювання поряд з кожним полем, щоб скопіювати значення у ваш буфер обміну
Розширені функції
- Візуальне порівняння: Інструмент надає візуальне представлення відносних розмірів кожної одиниці
- Контроль точності: Усі обчислення зберігають 4 десяткові знаки для точності
- Від’ємні значення: Конвертер підтримує від’ємні значення, які є дійсними в CSS для властивостей, таких як поля
- Оновлення в реальному часі: Будь-яка зміна в полях введення або налаштуваннях розміру шрифту миттєво оновлює всі обчислення
Поради для точних конвертацій
- Для найбільш точних конвертацій REM встановіть розмір шрифту кореня так, щоб він відповідав значенню шрифту
<html>вашого проекту - Для точних конвертацій EM встановіть розмір шрифту батька так, щоб він відповідав розміру шрифту батьківського елемента, з яким ви працюєте
- Пам’ятайте, що стандартні розміри шрифтів браузерів можуть варіюватися, хоча 16px є найбільш поширеним стандартом
Практичні випадки використання конвертації одиниць CSS
Розуміння, коли використовувати кожну одиницю CSS і як конвертувати між ними, є вирішальним для ефективної веб-розробки. Ось кілька практичних застосувань та сценаріїв, де наш конвертер виявляється безцінним:
Адаптивний веб-дизайн
Конвертація між одиницями є важливою для створення дійсно адаптивних дизайнів:
- Підхід з мобільним першим: Почніть з базового дизайну в пікселях, а потім конвертуйте в відносні одиниці для масштабованості
- Управління точками зупинки: Використовуйте REM для послідовного простору на різних розмірах вікна
- Масштабування компонентів: Переконайтеся, що елементи інтерфейсу зберігають пропорційні відношення при зміні вікна
1/* Конвертуйте фіксовані значення пікселів в адаптивні одиниці REM */
2.container {
3 /* З: padding: 20px; */
4 padding: 1.25rem; /* 20px ÷ 16px = 1.25rem */
5
6 /* З: margin-bottom: 32px; */
7 margin-bottom: 2rem; /* 32px ÷ 16px = 2rem */
8}
9Поліпшення доступності
Використання відносних одиниць покращує доступність, поважаючи уподобання користувачів:
- Зміна розміру тексту: Коли користувачі змінюють розмір шрифту у своєму браузері, макети на основі REM адаптуються відповідно
- Функціональність збільшення: Відносні одиниці забезпечують збереження пропорцій, коли користувачі збільшують масштаб
- Повага до уподобань користувачів: Макети на основі відносних одиниць поважають налаштування розміру шрифту за замовчуванням користувача
Системи дизайну на основі компонентів
Сучасні системи дизайну виграють від продуманого використання одиниць:
- Послідовні компоненти: Використовуйте REM для глобальної послідовності та розміру
- Самодостатні модулі: Використовуйте EM для елементів, які повинні масштабуватися з їх батьківськими компонентами
- Токени дизайну: Конвертуйте між одиницями, коли реалізуєте токени дизайну в різних контекстах
Системи типографіки
Створення гармонійної типографіки вимагає ретельного вибору одиниць:
- Типографічні шкали: Визначте типографічну шкалу в REM для послідовного прогресу
- Висоти рядків: Використовуйте безодиничні значення або EM для пропорційних висот рядків
- Адаптивний текст: Налаштуйте розміри шрифтів на різних точках зупинки, зберігаючи пропорції
1/* Система типографії з використанням одиниць REM */
2h1 { font-size: 2.5rem; } /* 40px */
3h2 { font-size: 2rem; } /* 32px */
4h3 { font-size: 1.5rem; } /* 24px */
5h4 { font-size: 1.25rem; } /* 20px */
6p { font-size: 1rem; } /* 16px */
7small { font-size: 0.875rem; } /* 14px */
8Дизайни з піксельною точністю
При реалізації дизайнів з інструментів, таких як Figma або Photoshop:
- Передача дизайну: Конвертуйте значення пікселів з дизайнерських файлів у REM/EM для розробки
- Збереження точності: Забезпечте точний простір та розміри, використовуючи відносні одиниці
- Інтеграція системи дизайну: Перекладайте токени дизайну на основі пікселів у відносні одиниці
Альтернативні одиниці CSS
Хоча PX, REM та EM є найбільш поширеними одиницями, є альтернативи, які варто розглянути:
Одиниці вікна (VW, VH)
- VW (ширина вікна): 1vw дорівнює 1% ширини вікна
- VH (висота вікна): 1vh дорівнює 1% висоти вікна
- Випадок використання: Створення елементів, які масштабується безпосередньо з розміром вікна
Відсотки (%)
- Відносно розмірів батьківського елемента
- Випадок використання: Рідкісні макети та адаптивні ширини
Одиниці CH
- На основі ширини символу "0"
- Випадок використання: Створення контейнерів з певною кількістю символів на рядок
Одиниці EX
- На основі висоти маленької літери "x"
- Випадок використання: Тонка налаштування типографіки, особливо для коригування висоти x
Еволюція одиниць CSS у веб-розробці
Історія одиниць CSS відображає ширшу еволюцію веб-дизайну, від статичних макетів до сучасних адаптивних, доступних підходів.
Ранні веб-дизайни (1990-ті)
На ранніх етапах CSS пікселі панували. Веб-дизайнери створювали фіксовані макети, зазвичай шириною 640px або 800px, щоб відповідати загальним роздільним здатностям екранів. Доступність та різноманітність пристроїв не були великими проблемами, і точний контроль був головною метою.
Поява рідких макетів (початок 2000-х)
Коли розміри екранів стали різноманітними, відсоткові макети набули популярності. Дизайнери почали створювати більш гнучкі дизайни, хоча типографіка часто залишалася в піксельних одиницях. Ця епоха стала свідком впровадження одиниць EM у CSS, хоча їхнє впровадження було обмеженим через складність управління каскадними розмірами шрифтів.
Мобільна революція (2007-2010)
Введення iPhone у 2007 році змінило веб-дизайн. Раптом веб-сайти повинні були працювати на екранах шириною всього 320px. Це викликало інтерес до адаптивних дизайнерських технік та відносних одиниць. Обмеження одиниць EM (особливо каскадний ефект) стали більш очевидними, оскільки дизайни стали складнішими.
Ера адаптивного веб-дизайну (2010-2015)
Впливова стаття Ітана Маркотта про адаптивний веб-дизайн у 2010 році змінила підходи розробників до одиниць CSS. Одиниця REM була введена в CSS3, пропонуючи переваги відносного масштабування без каскадних ускладнень одиниць EM. Підтримка браузерами одиниць REM зростала протягом цього періоду.
Сучасні підходи CSS (2015-досі)
Сьогодні веб-розробка обіймає комбінацію одиниць для різних цілей:
- Одиниці REM для глобальної послідовності та доступності
- Одиниці EM для масштабування на рівні компонентів
- Пікселі для меж та точних деталей
- Одиниці вікна для дійсно адаптивних елементів
- Функція CSS calc() для поєднання різних типів одиниць
Ця еволюція відображає перехід вебу від документного середовища до складної платформи додатків, яка повинна працювати на безлічі пристроїв та контекстів.
Приклади коду для конвертації одиниць
Функції JavaScript для конвертера одиниць
1// Конвертуйте між одиницями PX, REM та EM
2const pxToRem = (px, rootFontSize = 16) => {
3 return px / rootFontSize;
4};
5
6const pxToEm = (px, parentFontSize = 16) => {
7 return px / parentFontSize;
8};
9
10const remToPx = (rem, rootFontSize = 16) => {
11 return rem * rootFontSize;
12};
13
14const emToPx = (em, parentFontSize = 16) => {
15 return em * parentFontSize;
16};
17
18const remToEm = (rem, rootFontSize = 16, parentFontSize = 16) => {
19 return rem * (rootFontSize / parentFontSize);
20};
21
22const emToRem = (em, parentFontSize = 16, rootFontSize = 16) => {
23 return em * (parentFontSize / rootFontSize);
24};
25
26// Приклад використання
27console.log(pxToRem(24)); // 1.5
28console.log(remToPx(1.5)); // 24
29console.log(pxToEm(24, 24)); // 1
30console.log(remToEm(2, 16, 32)); // 1
31CSS Кастомні властивості для конвертації одиниць
1:root {
2 /* Основні розміри шрифтів */
3 --root-font-size: 16px;
4 --base-font-size: var(--root-font-size);
5
6 /* Загальні значення пікселів, конвертовані в REM */
7 --space-4px: 0.25rem;
8 --space-8px: 0.5rem;
9 --space-16px: 1rem;
10 --space-24px: 1.5rem;
11 --space-32px: 2rem;
12 --space-48px: 3rem;
13
14 /* Типографічна шкала */
15 --text-xs: 0.75rem; /* 12px */
16 --text-sm: 0.875rem; /* 14px */
17 --text-base: 1rem; /* 16px */
18 --text-lg: 1.125rem; /* 18px */
19 --text-xl: 1.25rem; /* 20px */
20 --text-2xl: 1.5rem; /* 24px */
21}
22
23/* Приклад використання */
24.card {
25 padding: var(--space-16px);
26 margin-bottom: var(--space-24px);
27 font-size: var(--text-base);
28}
29
30.card-title {
31 font-size: var(--text-xl);
32 margin-bottom: var(--space-8px);
33}
34SCSS Міксини для конвертації одиниць
1// SCSS функції для конвертації одиниць
2@function px-to-rem($px, $root-font-size: 16) {
3 @return ($px / $root-font-size) * 1rem;
4}
5
6@function px-to-em($px, $parent-font-size: 16) {
7 @return ($px / $parent-font-size) * 1em;
8}
9
10@function rem-to-px($rem, $root-font-size: 16) {
11 @return $rem * $root-font-size * 1px;
12}
13
14// Приклад використання
15.element {
16 padding: px-to-rem(20);
17 margin: px-to-rem(32);
18 font-size: px-to-rem(18);
19
20 .nested {
21 // Використання розміру шрифту батька (18px) для конвертації EM
22 padding: px-to-em(16, 18);
23 margin-bottom: px-to-em(24, 18);
24 }
25}
26Python Конвертер одиниць
1def px_to_rem(px, root_font_size=16):
2 """Конвертувати пікселі в одиниці REM"""
3 return px / root_font_size
4
5def rem_to_px(rem, root_font_size=16):
6 """Конвертувати одиниці REM в пікселі"""
7 return rem * root_font_size
8
9def px_to_em(px, parent_font_size=16):
10 """Конвертувати пікселі в одиниці EM"""
11 return px / parent_font_size
12
13def em_to_px(em, parent_font_size=16):
14 """Конвертувати одиниці EM в пікселі"""
15 return em * parent_font_size
16
17# Приклад використання
18print(f"16px = {px_to_rem(16)}rem") # 16px = 1.0rem
19print(f"2rem = {rem_to_px(2)}px") # 2rem = 32px
20print(f"24px = {px_to_em(24, 16)}em") # 24px = 1.5em
21Часті запитання
У чому різниця між одиницями REM та EM?
Одиниці REM (кореневий em) є відносними до розміру шрифту кореневого елемента (зазвичай елемента <html>), тоді як одиниці EM є відносними до розміру шрифту їх батьківського елемента. Ця ключова різниця означає, що одиниці REM зберігають послідовний розмір по всьому документу незалежно від вкладення, тоді як одиниці EM можуть створювати компаундинг-ефект при вкладенні елементів.
Яка одиниця CSS найкраща для адаптивного дизайну?
Немає єдиної "найкращої" одиниці для всіх ситуацій. Зазвичай найбільш ефективним є поєднання одиниць:
- Одиниці REM для типографіки та послідовного простору
- Одиниці EM для специфічного масштабування компонентів
- Відсотки або одиниці вікна для ширини макетів
- Пікселі для меж та дрібних деталей
Ідеальний підхід — використовувати кожну одиницю для того, що вона робить найкраще в рамках єдиної системи.
Чому браузери за замовчуванням використовують розмір шрифту 16px?
Стандарт 16px був встановлений як стандарт читабельності, який добре працює на екранах. Дослідження показали, що текст розміром близько 16px є оптимальним для читання на екранах на типовій відстані перегляду. Цей стандарт також забезпечує хорошу базу для доступності, гарантуючи, що текст не буде занадто малим для більшості користувачів.
Чи можу я використовувати від’ємні значення з цими одиницями?
Так, CSS підтримує від’ємні значення для багатьох властивостей з використанням будь-якого типу одиниць. Від’ємні поля, трансформації та позиції є звичайними випадками використання від’ємних значень. Наш конвертер коректно обробляє від’ємні значення для всіх типів одиниць.
Як працюють одиниці EM з вкладеними елементами?
Одиниці EM компаундуються, коли елементи вкладені. Наприклад:
1.parent {
2 font-size: 16px;
3}
4.child {
5 font-size: 1.5em; /* 24px (16px × 1.5) */
6}
7.grandchild {
8 font-size: 1.5em; /* 36px (24px × 1.5) */
9}
10Цей компаундинг-ефект може бути корисним для створення пропорційних дизайнів, але вимагає обережного управління, щоб уникнути непередбаченого масштабування.
Як браузери обробляють субпіксельне рендеринг з відносними одиницями?
Браузери обробляють субпіксельні значення по-різному. Деякі браузери округлюють до найближчого пікселя, тоді як інші підтримують субпіксельне рендеринг для більш плавного масштабування. Це іноді може викликати незначні несумісності між браузерами, особливо з малими значеннями REM/EM або при використанні трансформацій. Для більшості випадків використання ці відмінності є незначними.
Який вплив на продуктивність має використання різних одиниць CSS?
Немає значних відмінностей у продуктивності між використанням пікселів, REM або EM одиниць у сучасних браузерах. Вибір одиниць повинен базуватися на вимогах дизайну, адаптивній поведінці та потребах доступності, а не на розгляді продуктивності.
Посилання та додаткова література
-
"CSS Values and Units Module Level 3." W3C Recommendation. https://www.w3.org/TR/css-values-3/
-
Маркотт, Ітан. "Адаптивний веб-дизайн." A List Apart, 25 травня 2010. https://alistapart.com/article/responsive-web-design/
-
Раттер, Річард. "Елементи типографічного стилю, застосовані до вебу." http://webtypography.net/
-
"CSS Units." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
-
"CSS Pixels vs. Physical Pixels." Stack Overflow Documentation. https://stackoverflow.com/questions/8785643/what-exactly-is-the-difference-between-css-pixels-and-device-pixels
-
Койєр, Кріс. "Довжини CSS." CSS-Tricks. https://css-tricks.com/the-lengths-of-css/
-
"Використання кастомних властивостей CSS (змінних)." MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
-
"Розуміння та використання одиниць rem у CSS." SitePoint. https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Спробуйте наш конвертер одиниць сьогодні
Припиніть боротися з ручними конвертаціями одиниць CSS і нехай наш конвертер одиниць PX, REM та EM виконає роботу за вас. Чи ви створюєте адаптивний веб-сайт, розробляєте систему дизайну, чи просто вивчаєте одиниці CSS, цей інструмент заощадить ваш час і забезпечить точність. Введіть свої значення зараз, щоб побачити, як легко може бути конвертація одиниць!
Відгуки
Натисніть на тост відгуку, щоб почати залишати відгук про цей інструмент
Супутні інструменти
Відкрийте для себе більше інструментів, які можуть бути корисними для вашого робочого процесу