使用Firefox,您只需按下即可放大整个网页CTRL +.这样做是按比例放大整个网页(字体,图像等).
如何使用简单的CSS复制相同的功能？
是否有类似的东西page-size: 150%(这将使整个页面部分增加x%？)
Jon*_*way 171
您可以使用CSS zoom属性 - 在IE 5.5 +,Opera和Safari 4以及Chrome中受支持
Firefox是唯一不支持Zoom的主要浏览器(此处为bugzilla项目),但您可以在Firefox 3.5中使用"专有"-moz-transform属性.
所以你可以使用:
div.zoomed {
zoom: 3;
-moz-transform: scale(3);
-moz-transform-origin: 0 0;
}
kum*_*rsh 69
这是一个相当晚的答案,但你可以使用
body {
transform: scale(1.1);
transform-origin: 0 0;
// add prefixed versions too.
}
将页面缩放110%.虽然zoom风格在那里,但Firefox仍然不能令人遗憾地支持它.
此外,这与缩放略有不同.该css transform像的图像缩放功能,所以它会放大你的网页,但不会造成回流,等等.
编辑更新了转换原点.
Joe*_*oey 17
如果您的CSS完全围绕ex或em单位构建,那么这可能是可行的.你只需要用font-size: 150%你的风格声明body或html.这应该导致所有其他长度按比例缩放.但是,你不能以这种方式缩放图像,除非他们也得到了一种风格.
但是,这是一个非常大的,如果大多数网站,反正.
小智 11
规模并不是最好的选择
它将需要一些其他调整，例如边距填充等..
但正确的选择是
zoom: 75%
小智 7
对于跨浏览器兼容性：
示例如下：
<html><body class="entire-webpage"></body></html>
.entire-webpage{
zoom: 2;
-moz-transform: scale(2);/* Firefox Property */
-moz-transform-origin: 0 0;
-o-transform: scale(2);/* Opera Property */
-o-transform-origin: 0 0;
-webkit-transform: scale(2);/* Safari Property */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0; /* Standard Property */
}
我有以下代码通过 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 + "%";
}
正如约翰内斯所说 - 没有足够的代表直接评论他的答案 - 只要所有元素的"维度被指定为字体大小的倍数,你就可以做到这一点.意思是,你使用%,em或ex的所有内容单位".虽然我认为%是基于包含元素,而不是font-size.
而且你通常不会将这些相对单位用于图像,因为它们是由像素组成的,但是有一个技巧可以使它更加实用.
如果你定义body{font-size: 62.5%};那么1em将相当于10px.据我所知,这适用于所有主流浏览器.
然后你可以指定你的(例如)100px方形图像,width: 10em; height: 10em;并假设Firefox的缩放设置为默认值,图像将是它们的自然尺寸.
制作body{font-size: 125%};和一切 - 包括图像 - 将是双原始大小.