一、IE和Chrome等瀏覽器與zoom
還在幾年前，zoom還只是IE瀏覽器自己私有的玩具，但是，現在，除了FireFox瀏覽器，其他，尤其Chrome和移動端瀏覽器已經很好支持zoom屬性了：
zoom的字面意思是“變焦”，攝影的時候常用到的一個概念。對於web上的zoom效果，你也可以按照此概念理解。可以改變頁面上元素的尺寸，屬於真實尺寸。
在舊的web時代。*zoom: 1可以給IE6/IE7瀏覽器增加haslayout, 用來清除浮動，修復一些布局上的疑難雜症等。
其支持的值類型有：
- 百分比值：
zoom:50%，表示縮小到原來的一半。 - 數值：
zoom:0.5，表示縮小到原來的一半。 - normal關鍵字：
zoom:normal等同於zoom:1.
注意，雖然Chrome/Safari瀏覽器支持了zoom屬性，但是，其實zoom並不是標准屬性。
二、CSS3 transform下的scale
而transform下的scale就不一樣了，是明明確確寫入規范的。從IE9+到其他現代瀏覽器都支持。語法為：transform: scale(<x> [<y>]). 同時有scaleX, scaleY專門的x, y方向的控制。
和zoom不同，scale並不支持百分比值和normal關鍵字，只能是數值。而且，還能是負數，沒錯，負數。而zoom不能是負值！
三、zoom和scale更深層次的差異
先總結下上面表面所見的差異：
- 瀏覽器兼容性。IE全族/Chrome/Safari和IE9+現代瀏覽器的差別。
- 控制縮放的值不一樣。
zoom更全面，但是不能是負數，只能等比例控制；而scale雖然只能是數值，但是能負數，可以只控制1個維度。
然而，更深層次的差異才是更重要的。
您可以狠狠地點擊這里：zoom和scale對比demo
從demo我們看出如下幾點差異：
- zoom的縮放是相對於左上角的；而scale默認是居中縮放；
- zoom的縮放改變了元素占據的空間大小；而scale的縮放占據的原始尺寸不變，頁面布局不會發生變化；
- zoom和scale對元素的渲染計算方法可能有差異（如下截圖示意）。
- 對文字的縮放規則不一致。zoom縮放依然受限於最小12像素中文大小限制；而scale就是純粹的對圖形進行比例控制，文字50%原來尺寸。
然后，還有一個肉眼看不見卻更重要的差異，渲染的性能差異明顯。
由於zoom的縮放會改變元素的真實空間大小，換句話說，實時影響了其他小伙伴。
在文檔流中zoom加在任意一個元素上都會引起一整個頁面的重新渲染，而scale只是在當前的元素上重繪。這其實很好理解，對吧。scale呢變化時候，其原本的尺寸是不變的，因此，就沒有layout的重計算；但是zoom牽一發動全身，就麻煩地多！
這就讓我們要斟酌下移動端一些功能的實現了。
我們要實現元素的縮放效果，可以使用CSS3 animation, 但是存在這樣一種情況，就是元素原本就使用了一些transform屬性進行，此時，再使用scale進行animation縮放，就會覆蓋原來的值，事情就會變得麻煩。
聰明的小伙伴想到了一個方法，就是使用zoom做動畫。從效果上講，zoom是可以的；但是，從性能上講，大家就要掂量掂量了。
四、結束語
在移動端，大家也可以使用zoom進行一些靜態內容的控制，可以避免為了scale而占有translate, rotate, skew等公用的transform屬性。
需要注意的是，Chrome等瀏覽器下，zoom/scale不要同時使用，因為，縮放效果會累加。如下圖所示的4倍變小：
本文轉自：https://yq.aliyun.com/wenji/367?spm=5176.8246799.0.0.MopRGW
如需轉載請注明出處：https://www.cnblogs.com/zhuchenglin/p/7797215.html