Прескочи към съдържанието
🛠️
Whiz Tools

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

Незабавно конвертирайте пиксели към REM и EM единици. Безплатен конвертор за CSS единици за отзивчив уеб дизайн. Поддържа персонализирани размери на шрифта и изчисления в реално време за точни резултати.

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

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

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

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

  • PX към REM: стойност в px ÷ коренен размер на шрифта
  • PX към EM: стойност в px ÷ размер на шрифта на родителския елемент
  • REM към PX: стойност в rem × коренен размер на шрифта
  • EM към PX: стойност в em × размер на шрифта на родителския елемент
Калкулатор за зареждане...
📚

Документация

Конвертор на единици px, rem и em

Конверторът от px към rem и em преобразува дължина в CSS между пиксели (px), коренов em (rem) и em, като използва размер на шрифта на кореновия елемент и размер на шрифта на родителския елемент, зададени от потребителя. Трите единици са най-разпространените начини за задаване на размера на текста и разстоянията в CSS — езика, използван за стилизиране на уебстраници.

Какво представляват px, rem и em?

Пикселът (px) е фиксирана единица. Кутия, зададена с ширина 200px, остава широка 200px независимо от размера на шрифта на страницата.

rem („коренов em“) е единица, която се мащабира спрямо размера на шрифта на кореновия елемент на страницата, обикновено тага <html>. Повечето браузъри задават размера на шрифта на кореновия елемент на 16px, освен ако сайтът не го промени. Ако размерът на шрифта на кореновия елемент е 16px, тогава 1rem е равен на 16px.

em е единица, която се мащабира спрямо размера на шрифта на родителския елемент — елемента, който я съдържа. Ако родителският елемент има font-size: 20px, тогава 1em в него е равен на 20px.

Основната разлика между rem и em е спрямо какво се измерва всяка от тях. Rem винаги се съобразява с кореновия елемент. Em се съобразява с най-близкия родителски елемент, затова стойността му може да се променя на всяко ниво на влагане.

Как се изчислява преобразуването от px към rem

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

r=pRr = \frac{p}{R}

където r е дължината в rem, p — дължината в пиксели, а R — размерът на шрифта на кореновия елемент в пиксели.

Пример с решение

При стандартен размер на шрифта на кореновия елемент от 16px, 24px се преобразуват в:

24 ÷ 16 = 1,5rem

Ако сайтът зададе размера на шрифта на кореновия елемент на 10px — често използван подход чрез задаване на html { font-size: 62.5%; }, тъй като 62,5% от 16px е 10px — същите 24px стават:

24 ÷ 10 = 2,4rem

Как се изчислява преобразуването от rem към px

За обратното преобразуване умножете стойността в rem по размера на шрифта на кореновия елемент:

p=r×Rp = r \times R

където p е дължината в пиксели, r — дължината в rem, а R — размерът на шрифта на кореновия елемент.

При коренов размер от 16px 1.5rem се преобразува обратно в 1,5 × 16 = 24px.

Как се изчислява преобразуването от px към em

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

e=pPe = \frac{p}{P}

където e е дължината в em, а P — размерът на шрифта на родителския елемент в пиксели.

Пример с решение

Ако размерът на шрифта на родителския елемент е 20px, тогава 24px се преобразуват в:

24 ÷ 20 = 1,2em

Как се изчислява преобразуването от em към px

Умножете стойността в em по размера на шрифта на родителския елемент:

p=e×Pp = e \times P

където p е дължината в пиксели, e — дължината в em, а P — размерът на шрифта на родителския елемент.

При родителски размер от 20px 1.2em се преобразува обратно в 1,2 × 20 = 24px.

Как се изчислява преобразуването от rem към em и от em към rem

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

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

където R е размерът на шрифта на кореновия елемент, а P — размерът на шрифта на родителския елемент.

Пример с решение

При размер на шрифта на кореновия елемент 16px и размер на шрифта на родителския елемент 20px, 2rem се преобразува в:

2 × (16 ÷ 20) = 1,6em

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

Кога е полезна всяка единица

Пикселите са подходящи за детайли, чийто размер не трябва да се променя, например рамка с дебелина 1px или икона с фиксирана ширина.

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

Em е подходящ вътре в един самостоятелен компонент, например бутон, при който отстъпите трябва да се мащабират заедно със собствения размер на шрифта на бутона. Често срещан проблем при em е натрупването: ако няколко вложени елемента използват font-size: 1.2em, всяко ниво умножава предходното, така че размерите на шрифта нарастват по-бързо от предвиденото.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

След три нива текстът е нараснал с около 73%, а не с 20%, което разработчикът може да очаква от едно-единствено правило 1.2em.

Използване на конвертора

  1. Въведете стойност в полето за пиксели, rem или em.
  2. Другите две полета се актуализират автоматично, като стойностите се закръглят до четири знака след десетичната запетая.
  3. Задайте размера на шрифта на кореновия елемент така, че да съответства на елемента <html> в проекта. По подразбиране в повечето браузъри той е 16px и влияе само на rem.
  4. Задайте размера на шрифта на родителския елемент така, че да съответства на размера на шрифта на елемента, в който би се намирала стойност в em. Той влияе само на em.
  5. Използвайте бутона за копиране до дадено поле, за да копирате стойността му.

И двете полета за размера на шрифта приемат цяло число пиксели, като най-малката разрешена стойност е 1px. Бутонът за нулиране изчиства стойността и връща двата размера на шрифта към 16px.

Под полетата инструментът изчертава по една лента за всяка единица. И трите ленти представляват една и съща физическа дължина, затова са с еднаква ширина — бърза проверка дали преобразуването е правилно. Лентата се изчертава с действителната си дължина в пиксели до 300px; всичко по-дълго се намалява, за да се побере, така че стойност 600px и стойност 900px и двете завършват на 300px. Лентите се показват само когато стойността в пиксели е над нулата.

Често задавани въпроси

Каква е разликата между rem и em? Rem винаги се отнася към размера на шрифта на кореновия елемент. Em се отнася към размера на шрифта на най-близкия родителски елемент. Стойността в rem остава една и съща навсякъде в страницата, докато стойността в em може да се променя в зависимост от дълбочината на влагане на елемента.

Защо браузърите използват 16px като стандартен размер на шрифта? 16px отдавна е стандартният размер на текста в основните браузъри, защото е удобен за четене на обичайни екрани без допълнително стилизиране. Насоките за уебдостъпност препоръчват текстът да може да се увеличава до 200%, без да се нарушава оформлението на страницата, а 16px е практична отправна стойност за това.

Какво представлява подходът 62,5%? Задаването на html { font-size: 62.5%; } превръща стандартния коренов размер на шрифта от 16px в 10px, тъй като 62,5% от 16 е 10. Това опростява изчисленията с rem, защото 1,6rem е равно на 16px, а 2,4rem е равно на 24px.

Могат ли стойностите в px, rem и em да бъдат отрицателни? Да, за свойства, които приемат отрицателни дължини, като отстъпи или CSS трансформации. В CSS вътрешният отстъп не може да бъде отрицателен; браузърите игнорират отрицателна стойност за вътрешен отстъп. Конверторът обработва отрицателни стойности, но не изчертава ленти за тях, защото лентата не може да има отрицателна ширина.

Трябва ли всяка стойност в пиксели да се преобразува в rem? Не непременно. Рамките и другите фини детайли обикновено се задават в пиксели, тъй като рядко е необходимо да се мащабират спрямо размера на шрифта и могат да изглеждат неравномерни при ширини под един пиксел. Rem е подходящ за разстояния и типографски настройки, които трябва да се мащабират според предпочитанията на потребителя за размер на шрифта.

Влияе ли изборът на единица върху производителността на страницата? Не. По време на оформлението браузърите преобразуват всяка CSS дължина до една и съща вътрешна стойност, така че px, rem и em се изобразяват с еднаква скорост. Изборът между тях влияе върху поддръжката и достъпността, но не и върху бързодействието.