Конвертор от PX към REM и EM: Калькулатор за CSS единици

Конвертирайте между пиксели (PX), коренов ем (REM) и ем (EM) CSS единици с този прост калькулатор. Основен инструмент за отзивчив уеб дизайн и разработка.

Конвертор на единици PX, REM и EM

Конвертирайте между пиксели (PX), коренен em (REM) и em (EM) единици. Въведете стойност в което и да е поле, за да видите еквивалентните стойности в другите единици.

Размер на основния шрифт

Размер на шрифта на родителския елемент

Пиксели (PX)

Коренен EM (REM)

rem

Визуализацията не е налична за отрицателни или нулеви стойности

Формули за конвертиране

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 единици, разделете стойността в пиксели на основния размер на шрифта:

$REM = \frac{PX}{rootFontSize}$

Например, с подразбиращия се основен размер на шрифта от 16px:

16px = 1rem
24px = 1.5rem
8px = 0.5rem

Конверсия от PX в EM

За да конвертирате пиксели в EM единици, разделете стойността в пиксели на размера на шрифта на родителския елемент:

$EM = \frac{PX}{parentFontSize}$

Например, с размер на шрифта на родителя от 16px:

16px = 1em
24px = 1.5em
8px = 0.5em

Конверсия от REM в PX

За да конвертирате REM единици в пиксели, умножете стойността в REM по основния размер на шрифта:

$PX = REM \times rootFontSize$

Например, с подразбиращия се основен размер на шрифта от 16px:

1rem = 16px
1.5rem = 24px
0.5rem = 8px

Конверсия от EM в PX

За да конвертирате EM единици в пиксели, умножете стойността в EM по размера на шрифта на родителския елемент:

$PX = EM \times parentFontSize$

Например, с размер на шрифта на родителя от 16px:

1em = 16px
1.5em = 24px
0.5em = 8px

Конверсия от REM в EM

За да конвертирате REM единици в EM единици, трябва да вземете предвид както основния размер на шрифта, така и размера на шрифта на родителския елемент:

$EM = REM \times \frac{rootFontSize}{parentFontSize}$

Ако и двата размера на шрифта са еднакви (например 16px), тогава 1rem = 1em.

Конверсия от EM в REM

За да конвертирате EM единици в REM единици, използвайте следната формула:

$REM = EM \times \frac{parentFontSize}{rootFontSize}$

Отново, ако и двата размера на шрифта са равни, тогава 1em = 1rem.

Как да използвате конвертора на PX, REM и EM единици

Нашият инструмент за конвертиране на единици улеснява превода на стойности между PX, REM и EM единици. Ето стъпка по стъпка ръководство за ефективно използване на конвертора:

Основна употреба

Въведете стойност в което и да е поле за вход (PX, REM или EM)
Конверторът ще изчисли автоматично и ще покаже еквивалентните стойности в другите две единици
Регулирайте основния размер на шрифта (по подразбиране: 16px), за да видите как това влияе на конверсиите в REM
Регулирайте размера на шрифта на родителя (по подразбиране: 16px), за да видите как това влияе на конверсиите в EM
Използвайте бутона копиране до всяко поле, за да копирате стойността в клипборда си

Разширени функции

Визуално сравнение: Инструментът предоставя визуално представяне на относителните размери на всяка единица
Контрол на прецизността: Всички изчисления поддържат 4 десетични знака за точност
Отрицателни стойности: Конверторът поддържа отрицателни стойности, които са валидни в CSS за свойства като маргини
Актуализации в реално време: Всяка промяна на входните стойности или настройки на размера на шрифта моментално актуализира всички изчисления

Съвети за точни конверсии

За най-точни конверсии на REM, задайте основния размер на шрифта да съответства на стойността на шрифта на вашия проект <html>
За точни конверсии на EM, задайте размера на шрифта на родителя да съответства на размера на шрифта на родителския елемент, с който работите
Помнете, че стандартните размери на шрифта на браузърите могат да варират, въпреки че 16px е най-често срещаният стандарт

Практически случаи на употреба за конверсия на CSS единици

Разбирането кога да използвате всяка CSS единица и как да конвертирате между тях е от решаващо значение за ефективната уеб разработка. Ето някои практични приложения и сценарии, при които нашият конвертор е безценен:

Отзивчив уеб дизайн

Конвертирането между единици е от съществено значение за създаването на наистина отзивчиви дизайни:

Подход с мобилен фокус: Започнете с базов дизайн в пиксели, след това конвертирайте в относителни единици за мащабируемост
Управление на прекъсвания: Използвайте REM за последователно разстояние между различни размери на екрана
Мащабиране на компоненти: Уверете се, че UI елементите поддържат пропорционални отношения, когато размерът на екрана се променя

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
31

CSS персонализирани свойства за конверсия на единици

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}
34

SCSS миксини за конверсия на единици

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}
26

Python конвертор на единици

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

Този компаундиращ ефект може да бъде полезен за създаване на пропорционални дизайни, но изисква внимателно управление, за да се избегне нежелано мащабиране.

Как да се справя с дисплеи с висока плътност (Retina) с CSS единици?

Дисплеите с висока плътност се обработват автоматично, когато се използват относителни единици като REM и EM. Тъй като тези единици се основават на размера на шрифта, а не на физическите пиксели, те се мащабират съответно на екрани с висока резолюция. За изображения и граници, обмислете използването на медийни заявки с устройство-пиксел-отношение или резолюция.

Трябва ли да използвам REM или EM за медийни заявки?

Поддръжката на REM и EM единици в медийните заявки значително се е подобрила. Използването на EM единици в медийните заявки обикновено се препоръчва, защото:

Те са относителни на стандартния размер на шрифта на браузъра
Те уважават предпочитанията на потребителя за размера на шрифта
Те предоставят последователни прекъсвания между браузърите

1/* Използване на EM единици за медийни заявки */
2@media (min-width: 48em) {  /* 768px с 16px основа */
3  /* Стилове за таблети */
4}
5
6@media (min-width: 64em) {  /* 1024px с 16px основа */
7  /* Стилове за настолни компютри */
8}
9

Как да конвертирам между единици в дизайнерски инструменти като Figma или Sketch?

Повечето дизайнерски инструменти работят основно с пиксели. Когато внедрявате дизайни:

Запишете основния размер на шрифта на вашия проект (обикновено 16px)
Разделете пиксовите стойности на основния размер на шрифта, за да получите REM стойности
За EM стойности, разделете на размера на шрифта на родителя
Обмислете създаването на дизайнерски токени или променливи за често срещани стойности

Някои дизайнерски инструменти имат плъгини, които могат да помогнат с този процес на конверсия автоматично.

Как браузърите обработват подпикселовото рендиране с относителни единици?

Браузерите обработват подпикселовите стойности по различен начин. Някои браузъри закръглят до най-близкия пиксел, докато други поддържат подпикселово рендиране за по-гладко мащабиране. Това понякога може да причини малки несъответствия между браузърите, особено с малки 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 единици." 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 единици, този инструмент ще ви спести време и ще осигури точност. Въведете вашите стойности сега, за да видите колко лесна може да бъде конверсията на единици!

💬

Обратна връзка

💬

Щракнете върху тост за обратна връзка, за да започнете да давате обратна връзка за този инструмент

🔗

Свързани инструменти

Открийте още инструменти, които могат да бъдат полезни за вашия работен процес

Конвертор на времеви единици: Години, Дни, Часове, Минути, Секунди

Опитайте този инструмент

Конвертор между двоичен и десетичен: Преобразувайте между числови системи

Опитайте този инструмент

Конвертор на размери обувки: Системи за размери в САЩ, Великобритания, ЕС и Япония

Опитайте този инструмент

Конвертор на числови системи: Двоичен, Десетичен, Шестнадесетичен и Потребителски бази

Опитайте този инструмент

Международен конвертор на размери обувки: САЩ, Великобритания, ЕС и други

Опитайте този инструмент