Como posso dimensionar uma página da web inteira com CSS?

Usando o Firefox, você pode ampliar uma página da web inteira simplesmente pressionando CTRL +. O que isso faz é aumentar proporcionalmente a página da web inteira (fontes, imagens, etc.).

Como posso replicar a mesma funcionalidade usando simplesmente CSS?

Existe algo como page-size: 150%(o que aumentaria as partes da página inteira em x%?)

Você pode usar a zoompropriedade CSS - suportada no IE 5.5+, Opera e Safari 4 e Chrome

Posso usar: css Zoom

O Firefox é o único navegador principal que não suporta Zoom ( item do bugzilla aqui ), mas você pode usar a propriedade "proprietária" -moz-transform no Firefox 3.5 .

Então você pode usar:

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

Esta é uma resposta bastante tardia, mas você pode usar

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

para ampliar a página em 110%. Embora o zoomestilo esteja lá, o Firefox ainda não o suporta infelizmente.

Além disso, isso é um pouco diferente do seu zoom. O css transformfunciona como um zoom da imagem, por isso vai ampliar sua página, mas não causa refluxo, etc.

O Edit atualizou a origem da transformação.

Se o seu CSS é construído completamente em torno exou emunidades, então isso pode ser possível e viável. Você só precisa declarar font-size: 150%em seu estilo para bodyou html. Isso deve fazer com que todos os outros comprimentos sejam dimensionados proporcionalmente. Você não pode dimensionar imagens dessa maneira, a menos que elas também tenham um estilo.

Mas isso é muito grande se na maioria dos sites, de qualquer maneira.

Como Johannes diz - não há representante suficiente para comentar diretamente sua resposta - você pode realmente fazer isso desde que as dimensões de todos os elementos sejam especificadas como um múltiplo do tamanho da fonte. Significado, tudo em que você usou%, em ou ex unidades". Embora eu pense que% se baseie em conter o elemento, não no tamanho da fonte.

E você normalmente não usaria essas unidades relativas para imagens, uma vez que são compostas de pixels, mas há um truque que torna isso muito mais prático.

Se você definir body{font-size: 62.5%};, 1em será equivalente a 10px. Tanto quanto sei, isso funciona em todos os principais navegadores.

Em seguida, você pode especificar suas (por exemplo) imagens quadradas de 100px width: 10em; height: 10em;e assumindo que a escala do Firefox está definida como padrão, as imagens terão o tamanho natural.

A marca body{font-size: 125%};e tudo - incluindo imagens - terão o dobro do tamanho original.

Com este código, 1em ou 100% será igual a 1% da altura do corpo

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

 * {
transform: scale(1.1, 1.1)
}

isso transformará todos os elementos da página

Jon Tan fez isso com seu site - http://jontangerine.com/ Tudo, incluindo imagens, foi declarado em ems. Tudo. É assim que o efeito desejado é alcançado. O zoom de texto e o zoom da tela produzem exatamente o mesmo resultado.

O CSS não poderá ampliar a demanda, mas se você associar o CSS ao JS, poderá alterar alguns valores para fazer a página parecer maior. No entanto, como foi dito, esse recurso é padrão hoje em dia nos navegadores modernos: não há necessidade de replicá-lo. Por uma questão de fato, replicá-lo diminuirá a velocidade do seu site (mais coisas para carregar, mais JS ou CSS para analisar ou executar e aplicar etc.)

Eu tenho o seguinte código que dimensiona a página inteira através de propriedades CSS. O importante é definir a largura do corpo. inversão do zoom para evitar a rolagem horizontal. Você também deve definir a origem da transformação como superior esquerda para manter a parte superior esquerda do documento na parte superior esquerda da janela.

        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 + "%";
        }