| px | rem | em | pt | % |
|---|---|---|---|---|
| 1 | 0.0625 | 0.0625 | 0.75 | 6.25 |
| 2 | 0.125 | 0.125 | 1.5 | 12.5 |
| 4 | 0.25 | 0.25 | 3 | 25 |
| 8 | 0.5 | 0.5 | 6 | 50 |
| 10 | 0.625 | 0.625 | 7.5 | 62.5 |
| 12 | 0.75 | 0.75 | 9 | 75 |
| 14 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13.5 | 112.5 |
| 20 | 1.25 | 1.25 | 15 | 125 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 28 | 1.75 | 1.75 | 21 | 175 |
| 32 | 2 | 2 | 24 | 200 |
| 36 | 2.25 | 2.25 | 27 | 225 |
| 40 | 2.5 | 2.5 | 30 | 250 |
| 48 | 3 | 3 | 36 | 300 |
| 56 | 3.5 | 3.5 | 42 | 350 |
| 64 | 4 | 4 | 48 | 400 |
Преобразователь единиц CSS преобразует длину между единицами, которые использует CSS для типа и макета размеров: PX, REM, EM, PT и %. Он существует потому, что современный адаптивный дизайн опирается на относительные единицы измерения — REM и EM-масштаб с настройками размера шрифта пользователя и масштабированием — в то время как макеты дизайна и старые таблицы стилей обычно выражаются в фиксированных пикселях. Этот инструмент принимает значение, например 24px, и показывает его как 1.5Rem, 1.5EM, 18pt и 150% одновременно, и работает во всех направлениях из одного поля.
Все преобразования зависят от одного числа: корневого (базового) размера шрифта, который по умолчанию составляет 16px, потому что это по умолчанию браузер для элемента HTML. Один REM всегда равен базовому размеру шрифта, поэтому при 16px значение 16px — 1 REM, 24 пикселя — 1,5 REM, а 8 пикселей — 0,5 REM. Точки привязаны к эталонному пикселю CSS — 1 дюйм — 96 пикселей и 72pt — поэтому 1pt равен 96/72, около 1,333 пикселя. Процент считается долей базового размера шрифта, поэтому 100% равняется базе, а 50% — половине его.
В вашем браузере все работает по мере ввода, поэтому нет загрузки, нет ожидания на сервере и никаких ограничений на количество преобразований. Измените базовый размер шрифта, чтобы смоделировать компонент, который устанавливает свой собственный размер шрифта, читайте результаты в каждом блоке и скопируйте нужный. Встроенная таблица PX-TO-REM дает вам готовую ссылку на размеры, наиболее присущие масштабу типов.
Введите номер, который вы хотите преобразовать, и выберите устройство, в котором оно находится в данный момент — PX, REM, EM, PT или %. Вы также можете вставить значение с его юнитом, например 24px, и инструмент будет читать этот блок для вас.
Настройте размер корневого шрифта, если в вашем проекте используется нечто иное, чем 16px браузера по умолчанию. Это управляет тем, как REM, EM и % соотносятся с пикселями.
Преобразователь мгновенно показывает эквивалентное значение во всех поддерживаемых модулях, каждый с их суффиксом юнитов, поэтому вы можете бросить его прямо в CSS.
Скопируйте любой результат одним щелчком мыши или сканируйте справочную таблицу PX-REM для общих размеров в типографской шкале.
Введите одно значение и мгновенно отобразите px, REM, EM, PT и %, каждый из которых отформатирован вместе с его единицей, чтобы вы могли вставлять его непосредственно в таблицу стилей.
Размер корневого шрифта регулируется, поэтому преобразования REM, EM и % соответствуют вашему проекту — независимо от того, используете ли вы 16px по умолчанию, 10px «62,5%» или размер шрифта на уровне компонента.
Нет фиксированного "от" и "к". Преобразование PX в REM, REM в PX, PX в EM или PT в PX — любой модуль в любой модуль — из одного входа.
В встроенной таблице перечислены эквиваленты REM, EM, PT и % для размеров пикселей, которые наиболее часто встречаются в масштабах типа, поэтому вы можете смотреть на целую шкалу на выбранной вами базе.
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Convert length, weight, temperature, area, volume, speed, time, data, pressure, energy, and angle units instantly with exact conversion factors
0 comments
No comments yet. Be the first to share your thoughts!