最近做了兩個項目，一個需要對字體縮小，小於默認的字體大小(12px),最后使用transform:scale(0.9),但整個元素寬高都被縮小了，感覺很不好~~~做另外一個項目要求將整體頁面安一定比例縮小，最初使用了scale,縮小是達到了，但頁面位置已經不曉得跑哪去了，於是改用zoom,看着舒服多了，於是我就想用zoom縮放字體，😑但是沒有用，兩者都是縮放，那區別和特點是什么呢？我整理了一下幾點。
一：zoom的兼容性
在以前，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不能是負值！
三：scale與zoom之間的差異
- 瀏覽器兼容性。IE全族/Chrome/Safari和IE9+現代瀏覽器的差別。
- 控制縮放的值不一樣。
zoom更全面，但是不能是負數，只能等比例控制；而scale雖然只能是數值，但是能負數，可以只控制1個維度。 - zoom的縮放是相對於左上角的；而scale默認是居中縮放；
- zoom的縮放改變了元素占據的空間大小；而scale的縮放占據的原始尺寸不變，頁面布局不會發生變化；
- 對文字的縮放規則不一致。zoom縮放依然受限於最小12像素中文大小限制；而scale就是純粹的對圖形進行比例控制，文字50%原來尺寸。