如何使用CSS缩放整个网页？

使用Firefox，您只需按一下即可放大整个网页CTRL +。这样做是按比例放大整个网页（字体，图像等）。

如何仅使用CSS复制相同的功能？

是否有类似的东西page-size: 150%（它将使整个页面的部分增加x％？）

您也许可以使用CSS zoom属性-IE 5.5 +，Opera和Safari 4和Chrome支持

我可以使用：CSS缩放

Firefox是唯一不支持Zoom的主流浏览器（此处为bugzilla项），但是您可以在Firefox 3.5中使用“专有” -moz-transform属性。

因此，您可以使用：

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。这将导致其他所有长度按比例缩放。但是，您不能以这种方式缩放图像，除非它们也具有样式。

但是，这是一个非常大的，如果大多数网站，反正。

正如Johannes所说的-不足以直接对他的回答发表评论-只要将所有元素的“尺寸都指定为字体大小的倍数，就可以做到这一点。”实际上，您使用％，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)
}

这将转换页面上的每个元素

乔恩·谭（Jon Tan）通过其网站-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 + "%";
        }