因為網站設計時就不是針對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)

}

總結

以上是生活随笔為你收集整理的html和css占前端的多少比例,【CSS】前端怎么实现像chrome浏览器的百分比缩放同样的效果?...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。