Масштабирование страницы - перевод Css Pixel в Rem и обратно


Описание сервиса

Cервис предназначен для перевода абсолютных CSS единиц измерения в относительные, а именно px в rem и обратно.
Если вам необходимо изменить масштаб страницы (т.е. пропорционально уменьшить всю html-страницу), можно применить следующий способ:
Использовать относительные размеры rem, при необходимости, меняя размер шрифта для корневого тэга. Rem зависит от размера базового шрифта, таким образом, изменяя значение font-size для элемента ‹html› мы можем влиять на все значения rem на странице.
Например, если при разрешении 1366х720 содержимое не помещается на экране, то переводим стили из px в rem и указываем размер шрифта для нужного разрешения с помщью медиа-запроса: @media (min-width: 1200px) and (max-width: 1366px) {html {font-size: 13px;}} Размер базового шрифта поумолчанию обычно составляет 16px.
Для изменения размеров в зависимости от ширины экрана, применяем следующую формулу: @media (min-width: 320px) and (max-width: 767px) {html {font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (767 - 320)));}}

Как пользоваться сервисом
Вы можете загрузить готовый CSS-файл или вставить фрагмент кода в текстовое поле.
Нажав кнопку "Преобразовать" вы получите результат в виде CSS-файла или измененного кода в текстовом поле. В последнем случае код можно скопировать в один клик по кнопке .

Есть еще пара способов:
  • Стандартное свойство CSS transform: scale(N%) для корня документа, однако, при этом могут пострадать качество и производительность.
  • Нестандартное свойство CSS zoom: N%, также для корня документа. Этот вариант работает не во всех браузерах, например, Mozilla Firefox его не поддерживает.

Поделиться