Масштабирование всей веб-страницы CSS: аналог CTRL +

Быстрый ответ

Чтобы уменьшить веб-страницу вдвое, используйте CSS-свойство transform: scale(0.5);, применяя его к элементу body. Этот метод уменьшает все элементы страницы, с сохранением общей структуры расположения.

body {
  transform: scale(0.5); 
  transform-origin: 0 0; 
}

Так, страница уменьшится вдвое, основываясь на верхнем левом углу. Значение scale() поддаётся настроек, позволяя достичь необходимых размеров. Это удобный подход для быстрой и равномерной корректировки масштаба.

Браузерный запрос: Совместимость и методы

Универсальный метод с zoom

Каждый браузер уникален, как и его поддержка масштабирования. zoom отлично подходит для изменения размера макета, но стоит запомнить: это свойство могут слабо соответствовать стандартам и работать неодинаково в различных браузерах:

.zoomed {
  zoom: 150%; 
}

Для Firefox используйте -moz-transform: scale():

.zoomed {
  zoom: 150%;
  -moz-transform: scale(1.5); 
  -moz-transform-origin: 0 0;
}

Подробнее об этом расскажет наш спикер на видео

JavaScript для динамичного масштабирования

JavaScript предоставляет возможность настроить автоматическое масштабирование:

function setZoomLevel(level) {
  document.body.style.transform = `scale(${level})`;
  document.body.style.transformOrigin = '0 0';
}

Просто вызовите setZoomLevel(1.2), чтобы увеличить масштаб на 20%.

Обзор масштабирования и наилучшие практики

Дизайн: последствия пропорционального изменения размеров

Используйте относительные единицы измерения (em или ex) для текста и макетов, чтобы сохранить пропорциональность дизайна. Они масштабируются совместно с размером шрифта его родителя:

body {
  font-size: 150%; 
}

.element {
  width: 10em; 
}

Корректировка макета при масштабировании

Будьте внимательны к отступам и полям — возможно, им потребуется коррекция после масштабирования:

.element {
  margin: 2em; 
}

Соблюдение ширины при масштабировании

Контролируйте ширину элементов в процессе масштабирования, устанавливая ширину body пропорционально уровню зума:

body {
  transform: scale(0.8); 
  width: 125%; 
}

Визуализация

Вообразите город в миниатюре:

🏢🌳🚗 Важна каждая деталь.

Теперь мы надеваем волшебные очки (CSS transform: scale();):

html { transform: scale(1.2); }

🔍🏙️ Весь город словно на ладони!

Не напоминает ли это масштабирование в мультфильме?

Продвинутые сценарии: Руководство по выживанию

Борьба с переполнением и позиционированием

Масштабирование может вызывать проблемы с переполнением. Контролируйте прокрутку с помощью overflow: hidden или auto:

.container {
  overflow: auto; 
}

Адаптивное масштабирование для вьюпортов

Единицы вьюпорта CSS — идеальное решение для реагирования на изменения размеров:

body {
  transform: scale(calc(100vw / 1200)); 
}

Тщательное масштабирование и доступность

При масштабировании следите за тем, чтобы элементы оставались доступными. Слишком маленькие или слишком большие размеры могут затруднить использование. Медиазапросы помогут применять различные масштабы:

@media screen and (max-width: 768px) {
  body {
    transform: scale(0.6);
  }
}

@media screen and (min-width: 769px) {
  body {
    transform: scale(1);
  }
}

Полезные материалы

1. МетаТег viewport – HTML: HyperText Markup Language | MDN — разберитесь, как применять метатег viewport.
2. Свойство CSS transform – W3Schools — изучите возможности CSS-свойства transform.
3. CSS единицы вьюпорта: vh, vw, vmin, и vmax — SitePoint — узнайте о единицах вьюпорта CSS.
4. Отзывчивый веб-дизайн: Что это и как его использовать — Smashing Magazine — погрузитесь в тему отзывчивого веб-дизайна.
5. Упругие сетки – A List Apart — научитесь создавать адаптивные сетки для масштабируемых макетов.
6. Основы отзывчивого веб-дизайна | Статьи | web.dev — освойте базовые принципы отзывчивого веб-дизайна.
7. Can I use... Таблицы поддержки для HTML5, CSS3, и т.д. — проверьте совместимость CSS-свойства Transform.