因为网站设计时就不是针对1024分辨率的, 现在如果重做工作量巨大(和重做整个平台差不多了)
现在发现chrome 75% 缩放效果和期望效果几乎一样.
所以有没有什么方法可以实现这效果?
js或css的都可以, 浏览器只考虑chrome
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
5
857
收藏
html{ transform:scale(.75) }
把页面拆开，分别缩放。
之前的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不要同时使用，因为缩放效果会叠加
media-query + 使用 rem。