因?yàn)榫W(wǎng)站設(shè)計(jì)時(shí)就不是針對(duì)1024分辨率的, 現(xiàn)在如果重做工作量巨大(和重做整個(gè)平臺(tái)差不多了)

現(xiàn)在發(fā)現(xiàn)chrome 75% 縮放效果和期望效果幾乎一樣.

所以有沒(méi)有什么方法可以實(shí)現(xiàn)這效果?

js或css的都可以, 瀏覽器只考慮chrome

回答：

最后用electron打包了一個(gè)客戶端搞定了. electron 的 BrowserWindow.webPreferences.zoomFactor 屬性和chrome的是一樣的

回答：

之前的QQ公眾號(hào)項(xiàng)目就有使用zoom/scale, 實(shí)現(xiàn)圖片hover放大的效果.IE7/IE8使用zoom, 其他瀏覽器使用CSS3 transform scale值實(shí)現(xiàn)。

有個(gè)值得注意的是，我之前看到網(wǎng)上說(shuō)，在文檔流中zoom加在任意一個(gè)元素上都會(huì)引起一整個(gè)頁(yè)面的重新渲染，而scale只是在當(dāng)前的元素上重繪。這其實(shí)很好理解，對(duì)吧。scale呢變化時(shí)候，其原本的尺寸是不變的，因此，就沒(méi)有l(wèi)ayout的重計(jì)算；但是zoom牽一發(fā)動(dòng)全身，就麻煩地多！

二者之間的差異：

1、zoom的縮放是相對(duì)于左上角的；而scale默認(rèn)是居中縮放

2、zoom的縮放改變了元素占據(jù)的空間大小；而scale的縮放占據(jù)的原始尺寸不變，頁(yè)面布局不會(huì)發(fā)生變化

3、zoom和scale對(duì)元素的渲染計(jì)算方法可能有差異(有可能會(huì)引起圖片失真)

4、對(duì)文字的縮放規(guī)則不一致。zoom縮放依然受限于最小12像素中文大小限制；而scale就是純粹的對(duì)圖形進(jìn)行比例控制

最后需要注意的是，zoom和transform scale不要同時(shí)使用，因?yàn)榭s放效果會(huì)疊加

回答：

html {

zoom: .75

}

回答：

html{ transform:scale(.75) }

回答：

把頁(yè)面拆開(kāi)，分別縮放。

回答：

media-query + 使用 rem。

回答：

html{

transform:scale(.75)

}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。