html和css占前端的多少比例,【CSS】前端怎么实现像chrome浏览器的百分比缩放同样的效果?...

因为网站设计时就不是针对1024分辨率的, 现在如果重做工作量巨大(和重做整个平台差不多了)

现在发现chrome 75% 缩放效果和期望效果几乎一样.

所以有没有什么方法可以实现这效果?

js或css的都可以, 浏览器只考虑chrome

回答：

最后用electron打包了一个客户端搞定了. electron 的 BrowserWindow.webPreferences.zoomFactor 属性和chrome的是一样的

回答：

之前的QQ公众号项目就有使用zoom/scale, 实现图片hover放大的效果.IE7/IE8使用zoom, 其他浏览器使用CSS3 transform scale值实现。

有个值得注意的是，我之前看到网上说，在文档流中zoom加在任意一个元素上都会引起一整个页面的重新渲染，而scale只是在当前的元素上重绘。这其实很好理解，对吧。scale呢变化时候，其原本的尺寸是不变的，因此，就没有layout的重计算；但是zoom牵一发动全身，就麻烦地多！

二者之间的差异：

1、zoom的缩放是相对于左上角的；而scale默认是居中缩放

2、zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化

3、zoom和scale对元素的渲染计算方法可能有差异(有可能会引起图片失真)

4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制

最后需要注意的是，zoom和transform scale不要同时使用，因为缩放效果会叠加

回答：

html {

zoom: .75

}

回答：

html{ transform:scale(.75) }

回答：

把页面拆开，分别缩放。

回答：

media-query + 使用 rem。

回答：

html{

transform:scale(.75)

}