Какво прави конверторът
Инструментът конвертира стойности в пиксели (px) в rem и em, и обратно. Въвеждате стойност в кое да е от трите полета — px, rem или em — и конверторът автоматично изчислява и показва еквивалентните стойности в другите две единици, без да се налага да превключвате между отделни изчисления за всяка единица. Освен това можете да зададете собствен основен размер на шрифта и собствен em контекстен размер на шрифта, така че конверсиите да отговарят точно на нуждите на Вашия конкретен дизайн, а не на едно фиксирано, общо допускане.
Полетата за въвеждане
Инструментът работи с три полета:
- Основен размер на шрифта (px) — число, представляващо базовия размер на шрифта в пиксели.
- em контекстен размер на шрифта (px) — число, представляващо размера на шрифта на елемента, за който правите em конверсии.
- Стойности — число, представляващо дължина в px, rem или em.
Като резултат инструментът показва зададения от Вас основен размер на шрифта, зададения em контекстен размер на шрифта, конвертираните стойности между трите мерни единици, както и таблицата „Често срещани px → rem (база 16px)“, която показва разпространени стойности в пиксели, конвертирани в rem при основен размер на шрифта от 16px. По този начин виждате едновременно въведените от Вас числа и готовите резултати, без да се налага да прелиствате между отделни екрани.
Как се обновяват стойностите, докато въвеждате
Когато редактирате което и да е от полетата за px, rem или em, другите две се актуализират, докато пишете. По подразбиране основният размер на шрифта е 16px, а em контекстният размер на шрифта също е 16px по подразбиране. При тези начални стойности 16px се равняват на 1rem и на 1em. Ако промените основния размер на шрифта, за да отговаря на Вашия CSS, всяка стойност в rem се преизчислява веднага.
Инструментът позволява въвеждане и на отрицателни стойности в пиксели, ако това е нужно за конкретния Ви случай. От друга страна, основният размер на шрифта трябва да бъде число, по-голямо от 0, а същото важи и за em контекстния размер на шрифта — и двете полета изискват положително число, за да могат конверсиите да се извършат.
Съобщения за грешка при невалидни стойности
Ако въведете невалидна стойност в полето „Стойности“, инструментът показва съобщението „Въведете число за конвертиране.“
Ако въведеният основен размер на шрифта е невалиден, се показва съобщението „Основният размер на шрифта (root) трябва да бъде число, по-голямо от 0.“
Ако въведеният em контекстен размер на шрифта е невалиден, се показва съобщението „Контекстният размер за em трябва да бъде число, по-голямо от 0.“
Поверителност на данните
Всяко конвертиране се извършва във Вашия браузър. Нищо от въведеното не се изпраща към BroBroGo.
За кого е полезен този инструмент
- За хора, които трябва да преобразуват фиксирани стойности в пиксели в относителни rem или em единици, когато изграждат responsive дизайн.
- За хора, които искат да разберат как различните основни размери на шрифта влияят върху стойностите в rem, преди да заложат конкретна база в проекта си.
- За хора, които трябва да изчислят em стойности спрямо размера на шрифта на конкретен елемент, а не спрямо основния размер на страницата.
- За хора, които искат да се уверят, че оразмеряването им се мащабира правилно, когато читателят промени размера на шрифта по подразбиране в браузъра си, вместо да разчитат единствено на фиксирани пикселни стойности.
Често задавани въпроси
Каква е разликата между px, rem и em?
px е фиксирана дължина. rem се измерва спрямо основния размер на шрифта на страницата (root), така че при 16px основен размер, 1rem е равен на 16px. em се измерва спрямо размера на шрифта на елемента, в който се намира. Оразмеряването на шрифтовете и отстоянията в rem позволява на всичко да се мащабира правилно, когато читателят промени размера на шрифта по подразбиране в браузъра си.
Защо има отделен контекстен размер за em?
Мерната единица em е относителна спрямо размера на шрифта на собствения си елемент, който не винаги съвпада с основния (root). Задайте em контекста спрямо размера на шрифта на този елемент, за да изчислите правилно em, и го запазете равен на основния, когато двата съвпадат.
Какво става, ако основният ми размер на шрифта не е 16px?
Променете полето за основен размер на шрифта (root font size), за да съответства на Вашия CSS, и всяка rem стойност ще се актуализира веднага. Бързата таблица по-долу е удобен ориентир за стандартната база от 16px, от която започват повечето сайтове.