Как я могу масштабировать всю веб-страницу с помощью CSS?

Используя Firefox, вы можете увеличить всю веб-страницу, просто нажав CTRL +. Это пропорционально увеличивает всю веб-страницу (шрифты, изображения и т. Д.).

Как я могу повторить ту же функциональность, используя просто CSS?

Есть ли что-то подобное page-size: 150%(что увеличило бы целые части страницы на x%?)

Возможно, вы сможете использовать zoomсвойство CSS - поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.

Можно ли использовать: css Zoom

Firefox - единственный крупный браузер, который не поддерживает Zoom ( элемент bugzilla здесь ), но вы можете использовать свойство "proprietary" -moz-transform в Firefox 3.5 .

Таким образом, вы можете использовать:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

Это довольно поздний ответ, но вы можете использовать

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

чтобы увеличить страницу на 110%. Хотя zoomстиль есть, Firefox все еще не поддерживает его, к сожалению.

Кроме того, это немного отличается от вашего зума. css transformРаботает как масштабирование изображения, так что это увеличит вашу страницу , но не причиной оплавления и т.д.

Редактировать обновленный источник трансформации.

Если ваш CSS построен полностью вокруг exили emединиц, то это может быть возможно и осуществимо. Вам просто нужно объявить font-size: 150%в своем стиле для bodyили html. Это должно привести к пропорциональному масштабированию любой другой длины. Вы не можете масштабировать изображения таким образом, если только у них тоже нет стиля.

Но в любом случае это очень большая цифра на большинстве сайтов.

Как говорит Йоханнес - недостаточно представителя, чтобы комментировать свой ответ - вы действительно можете сделать это, если размеры всех элементов указаны как кратные размеру шрифта. Это означает, что все, где вы использовали%, em или ex единицы". Хотя я думаю, что% основаны на содержании элемента, а не на размере шрифта.

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

Если вы определите, body{font-size: 62.5%};то 1em будет эквивалентно 10px. Насколько я знаю, это работает во всех основных браузерах.

Затем вы можете указать свои (например) квадратные изображения размером 100px width: 10em; height: 10em;и, предполагая, что масштабирование Firefox по умолчанию установлено, изображения будут иметь их естественный размер.

Сделать body{font-size: 125%};и все - включая изображения - будет двойной оригинальный размер.

С этим кодом 1em или 100% будет равняться 1% роста

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

это преобразует каждый элемент на странице

Джон Тан сделал это на своем сайте - http://jontangerine.com/ Все, включая изображения, было объявлено в ems. Все. Так достигается желаемый эффект. Масштабирование текста и масштабирование экрана дают практически одинаковый результат.

CSS не сможет масштабировать по требованию, но если вы соедините CSS с JS, вы можете изменить некоторые значения, чтобы страница выглядела больше. Однако, как уже было сказано, эта функция является стандартной в настоящее время в современных браузерах: ее не нужно повторять. На самом деле, его репликация замедлит работу вашего сайта (больше вещей для загрузки, больше JS или CSS для анализа, выполнения и применения и т. Д.)

У меня есть следующий код, который масштабирует всю страницу через свойства CSS. Важно установить значение body.style.width, обратное масштабированию, чтобы избежать горизонтальной прокрутки. Вы также должны установить transform-origin в верхний левый угол, чтобы верхний левый угол документа оставался в верхнем левом углу окна.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }