DevTulz Online

Конвертор PX ↔ REM

px

PX → REM

px

REM → PX

rem

Справочна таблица

px rem em

Каква е разликата между PX и REM?

PX (пиксели) е абсолютна единица — винаги се изобразява с еднакъв физически размер. REM (root em) е относителна единица, базирана на размера на шрифта на основния елемент (обикновено 16px по подразбиране в браузърите). Използването на REM улеснява изграждането на достъпни, мащабируеми оформления, които зачитат предпочитанията за размер на шрифта на потребителя.

Как да използвате конвертора PX към REM

  1. Задайте основния размер на шрифта (по подразбиране е 16px — съответства на повечето браузъри).

  2. Въведете стойност в пиксели, за да видите еквивалентната стойност в REM.

  3. Или въведете стойност в REM, за да я конвертирате обратно в пиксели.

  4. Използвайте справочната таблица по-долу за често срещани конверсии на размери.

Формула: rem = px ÷ основен размер на шрифта. За стандартна основа от 16px: 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. Всички изчисления се извършват мигновено във вашия браузър.

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

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

Какъв е размерът на базовия шрифт? Повечето браузъри по подразбиране са 16px за размера на кореновия шрифт. Ако вашият CSS задава html { font-size: 62.5%; } (често трик), базата се превръща в 10px, което прави изчисленията на rem по-прости: 1rem = 10px. Коригирайте размера на основата на този инструмент, за да съответства на вашия проект.

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

Keywords: конвертор px към rem, rem към px, пиксели към rem, конвертор на CSS единици, конвертор на размер на шрифта, адаптивен дизайн, калкулатор rem