Размер контейнера — это 100% отсчёта: например, ширина экрана, родительского блока в вёрстке или холста в графическом редакторе.
Результат
У этой страницы вообще нет серверной части. Вставленная таблица разбирается кодом JavaScript внутри вашего же браузера, график рисуется на элементе canvas на вашей машине, файл экспорта собирается локально. Ничего не загружается, не хранится и не пишется ни в какие логи. После загрузки страницы можно отключить сеть — всё продолжит работать, и это самый простой способ проверить обещание самостоятельно.
Факты и границы применимости
| Формула % → 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-модели блока.
Мои данные куда-то отправляются?
Нет, весь расчёт выполняется в вашем браузере.