如何使用CSS扩展整个网页？

使用Firefox,您只需按下即可放大整个网页CTRL +.这样做是按比例放大整个网页(字体,图像等).

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

是否有类似的东西page-size: 150%(这将使整个页面部分增加x%？)

1> Jon Galloway..：

---

您可以使用CSS zoom属性 - 在IE 5.5 +,Opera和Safari 4以及Chrome中受支持

我可以使用:css Zoom

Firefox是唯一不支持Zoom的主要浏览器(此处为bugzilla项目),但您可以在Firefox 3.5中使用"专有"-moz-transform属性.

所以你可以使用:

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

---

大卫,这个参考已经过时了 - 看看它列出的浏览器版本.除了Firefox之外,所有当前主流浏览器都支持CSS Zoom.并且它不比任何-moz-CSS扩展更专有.

---

注意:我认为已经提出的其他解决方案 - 例如基于em和%的缩放 - 更"纯粹",但在大多数Web布局上并不一定实用,除非您从头开始构建这种方式.

---

谢谢jon,很棒的信息!在firefox -moz-transform scale中确实有效,但根据你的用例,你可能需要使用-moz-transform-origin来修正元素的位置(cfr.https://developer.mozilla.org/En/CSS/ -moz-变换原点)

2> kumarharsh..：

---

这是一个相当晚的答案,但你可以使用

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

将页面缩放110%.虽然zoom风格在那里,但Firefox仍然不能令人遗憾地支持它.

此外,这与缩放略有不同.该css transform像的图像缩放功能,所以它会放大你的网页,但不会造成回流,等等.

---

编辑更新了转换原点.

3> Joey..：

---

如果您的CSS完全围绕ex或em单位构建,那么这可能是可行的.你只需要用font-size: 150%你的风格声明body或html.这应该导致所有其他长度按比例缩放.但是,你不能以这种方式缩放图像,除非他们也得到了一种风格.

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

---

这只会改变我字体的大小.CTRL +也提出了加宽固定宽度,高度和图像尺寸的方法.

---

我知道,但它与纯CSS一样接近.此外,不仅您的字体会更改,而且所有尺寸都指定为字体大小的倍数.意思是,你使用`%`,`em`或`ex`单位的所有东西.

4> e100..：

---

正如约翰内斯所说 - 没有足够的代表直接评论他的答案 - 只要所有元素的"维度被指定为字体大小的倍数,你就可以做到这一点.意思是,你使用%,em或ex的所有内容单位".虽然我认为%是基于包含元素,而不是font-size.

而且你通常不会将这些相对单位用于图像,因为它们是由像素组成的,但是有一个技巧可以使它更加实用.

如果你定义body{font-size: 62.5%};那么1em将相当于10px.据我所知,这适用于所有主流浏览器.

然后你可以指定你的(例如)100px方形图像,width: 10em; height: 10em;并假设Firefox的缩放设置为默认值,图像将是它们的自然尺寸.

制作body{font-size: 125%};和一切 - 包括图像 - 将是双原始大小.