Размер контейнера — это 100% отсчёта: например, ширина экрана, родительского блока в вёрстке или холста в графическом редакторе.
Результат
Все вычисления выполняются локально в браузере: разбор, график, экспорт. Если отключите сеть, страница продолжит работать.
Факты и границы применимости
| Формула % → px | px = (проценты / 100) × размер контейнера |
|---|---|
| Формула px → % | проценты = (px / размер контейнера) × 100 |
| Пример | 50% от контейнера 1920 px = 960 px |
Когда этот метод вводит в заблуждение
- Результат целиком зависит от указанного размера контейнера — при изменении размера контейнера (например, при адаптивной вёрстке под другой экран) то же процентное значение будет соответствовать другому числу пикселей.
- Конвертер выполняет чисто арифметический пересчёт и не учитывает CSS-особенности реального рендеринга (например, box-sizing, отступы, границы), которые могут влиять на фактический видимый размер элемента.
- Результат округляется до 2 знаков после запятой, что обычно достаточно для практических задач вёрстки, хотя реальные пиксели в CSS не бывают дробными для большинства свойств.
- Значение размера контейнера должно быть положительным — конвертер не выдаёт результат при нулевом или отрицательном размере контейнера.
Как это считается
При переводе процентов в пиксели введённое значение процента делится на 100 и умножается на размер контейнера — так получается доля контейнера в пикселях.
При переводе пикселей в проценты введённое значение в пикселях делится на размер контейнера и умножается на 100 — так получается процентная доля.
Размер контейнера задаётся вручную для каждого расчёта, так как процент — величина относительная и не имеет смысла без базы отсчёта.
Результат округляется до 2 знаков после запятой и обновляется мгновенно при изменении любого параметра.
Вопросы и ответы
Зачем нужен размер контейнера, если я просто хочу перевести проценты в пиксели?
Потому что процент — это относительная величина: 50% от контейнера шириной 1920 px и 50% от контейнера шириной 800 px — это разное число пикселей (960 px и 400 px соответственно).
Можно ли использовать это для расчёта макета сайта?
Да, это частая задача при переводе адаптивной вёрстки (в процентах) в фиксированные пиксельные размеры для конкретного разрешения экрана, и наоборот.
Учитывает ли конвертер отступы и границы CSS-блока?
Нет, это чисто математический пересчёт доли от общего размера — box-sizing, padding и border нужно учитывать отдельно в зависимости от конкретной CSS-модели блока.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.