Конвертирайте между пиксели (PX), коренов ем (REM) и ем (EM) CSS единици с този прост калькулатор. Основен инструмент за отзивчив уеб дизайн и разработка.
Конвертирайте между пиксели (PX), коренен em (REM) и em (EM) единици. Въведете стойност в което и да е поле, за да видите еквивалентните стойности в другите единици.
Разбирането и конвертирането между CSS единици е от съществено значение за отзивчивия уеб дизайн и разработка. PX (пиксел), REM (корен em) и EM единиците са основни строителни блокове, които определят как елементите са размерени и позиционирани на различни устройства и размери на екрана. Този всеобхватен инструмент за конвертиране на единици позволява лесно да превеждате стойности между тези три критични CSS единици, помагайки ви да създавате по-гъвкави и поддържани уеб оформления.
Пикселите (PX) са фиксирани единици, които осигуряват прецизен контрол, но липсват мащабируемост, докато REM единиците се мащабират относително спрямо размера на шрифта на кореновия елемент, а EM единиците се мащабират относително спрямо размера на шрифта на родителския елемент. Конвертирането между тези единици може да бъде предизвикателство, особено когато работите с комплексни дизайни или когато поддържате функции за достъпност, като например увеличаване на текста. Нашият конвертор за PX, REM и EM опростява този процес, позволявайки ви да се фокусирате върху създаването на красиви, отзивчиви дизайни.
Пикселите (PX) са най-базовата и най-често използвана CSS единица. Един пиксел е точка в цифрова изображенска мрежа и представлява най-малкия контролируем елемент на екрана. В CSS пикселите предоставят фиксирана единица за измерване, която остава последователна независимо от други стилизиращи фактори.
1.element {
2 width: 200px;
3 font-size: 16px;
4 margin: 10px;
5}
6Ключови характеристики на пикселите:
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 единиците ще се отнасят към наследения размер на шрифта.
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 единиците е от решаващо значение за точните конверсии. Ето формулите, използвани в нашия конвертор:
За да конвертирате пиксели в REM единици, разделете стойността в пиксели на основния размер на шрифта:
Например, с подразбиращия се основен размер на шрифта от 16px:
За да конвертирате пиксели в EM единици, разделете стойността в пиксели на размера на шрифта на родителския елемент:
Например, с размер на шрифта на родителя от 16px:
За да конвертирате REM единици в пиксели, умножете стойността в REM по основния размер на шрифта:
Например, с подразбиращия се основен размер на шрифта от 16px:
За да конвертирате EM единици в пиксели, умножете стойността в EM по размера на шрифта на родителския елемент:
Например, с размер на шрифта на родителя от 16px:
За да конвертирате REM единици в EM единици, трябва да вземете предвид както основния размер на шрифта, така и размера на шрифта на родителския елемент:
Ако и двата размера на шрифта са еднакви (например 16px), тогава 1rem = 1em.
За да конвертирате EM единици в REM единици, използвайте следната формула:
Отново, ако и двата размера на шрифта са равни, тогава 1em = 1rem.
Нашият инструмент за конвертиране на единици улеснява превода на стойности между PX, REM и EM единици. Ето стъпка по стъпка ръководство за ефективно използване на конвертора:
<html>Разбирането кога да използвате всяка CSS единица и как да конвертирате между тях е от решаващо значение за ефективната уеб разработка. Ето някои практични приложения и сценарии, при които нашият конвертор е безценен:
Конвертирането между единици е от съществено значение за създаването на наистина отзивчиви дизайни:
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Използването на относителни единици подобрява достъпността, като уважава потребителските предпочитания:
Съвременните дизайнерски системи се възползват от внимателно използване на единици:
Създаването на хармонична типография изисква внимателен избор на единици:
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:
Докато PX, REM и EM са най-често срещаните единици, има алтернативи, които си заслужава да се разгледат:
Историята на CSS единиците отразява по-широката еволюция на уеб дизайна, от статични оформления до днешните отзивчиви, достъпни подходи.
В ранните дни на CSS пикселите царуваха. Уеб дизайнерите създаваха фиксирани оформления, обикновено с ширина 640px или 800px, за да отговорят на общите резолюции на екрана. Достъпността и разнообразието на устройствата не бяха основни проблеми, а пикселовият контрол беше основната цел.
С разнообразието на размерите на екрана, оформленията на базата на проценти станаха популярни. Дизайнерите започнаха да създават по-гъвкави дизайни, въпреки че типографията често оставаше в пикселови единици. Тази ера видя въвеждането на EM единиците в CSS, въпреки че тяхното приемане беше ограничено поради сложността на управлението на каскадните размери на шрифта.
Въведението на iPhone през 2007 г. трансформира уеб дизайна. Изведнъж уебсайтовете трябваше да работят на екрани с ширина само 320px. Това катализира интереса към техниките за отзивчив дизайн и относителните единици. Ограниченията на EM единиците (особено каскадният ефект) станаха по-очевидни, тъй като дизайните станаха по-сложни.
Влиятелната статия на Итан Маркот за отзивчивия уеб дизайн през 2010 г. промени начина, по който разработчиците подхождат към CSS единиците. REM единицата беше въведена в CSS3, предлагайки предимствата на относителното мащабиране без каскадните усложнения на EM единиците. Поддръжката на браузърите за REM единиците нарастваше стабилно през този период.
Днешната уеб разработка приема комбинация от единици за различни цели:
Тази еволюция отразява прехода на уеба от документално базирана среда към сложна платформа за приложения, която трябва да работи на безброй устройства и контексти.
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
311: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}
341// 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}
261def 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
21REM (корен em) единиците са относителни на размера на шрифта на кореновия елемент (обикновено елементът <html>), докато EM единиците са относителни на размера на шрифта на родителския елемент. Тази ключова разлика означава, че REM единиците поддържат последователно размерите в целия документ, независимо от вграждането, докато EM единиците могат да създадат компаундиращ ефект при вграждане на елементи.
Няма единствено "най-добра" единица за всички ситуации. Комбинация от единици обикновено е най-ефективна:
Идеалният подход е да използвате всяка единица за това, за което е най-добра в рамките на последователна система.
Стандартният размер от 16px беше установен като стандарт за четливост, който работи добре на екрани. Изследванията показват, че текст около 16px е оптимален за четене на екрани на типични разстояния на гледане. Този стандарт също така предоставя добра основа за достъпност, осигурявайки, че текстът не е твърде малък за повечето потребители.
Да, CSS поддържа отрицателни стойности за много свойства, използвайки всякакъв тип единици. Отрицателните маргини, трансформации и позиции са често срещани случаи на употреба. Нашият конвертор обработва отрицателните стойности правилно за всички типове единици.
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. Тъй като тези единици се основават на размера на шрифта, а не на физическите пиксели, те се мащабират съответно на екрани с висока резолюция. За изображения и граници, обмислете използването на медийни заявки с устройство-пиксел-отношение или резолюция.
Поддръжката на 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Повечето дизайнерски инструменти работят основно с пиксели. Когато внедрявате дизайни:
Някои дизайнерски инструменти имат плъгини, които могат да помогнат с този процес на конверсия автоматично.
Браузерите обработват подпикселовите стойности по различен начин. Някои браузъри закръглят до най-близкия пиксел, докато други поддържат подпикселово рендиране за по-гладко мащабиране. Това понякога може да причини малки несъответствия между браузърите, особено с малки REM/EM стойности или при използване на трансформации. За повечето случаи тези разлики са незначителни.
Няма значителна разлика в производителността между използването на пиксели, 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 единици, този инструмент ще ви спести време и ще осигури точност. Въведете вашите стойности сега, за да видите колко лесна може да бъде конверсията на единици!
Открийте още инструменти, които може да бъдат полезни за вашия работен процес