css中網頁縮放屬性zoomtransform中的scale

如果項目的版心是1300px的話，如果小屏觀看的話會有橫向的滾動條，這個時候再去改項目的樣式的話就比較的麻煩了，可以使用zoom來縮放頁面

zoom支持的類型有：

類型	說明
百分比zoom:50%;	表示縮小到原來的一半
數值zoom:0.5;	表示縮小到原來的一半
mormal關鍵字zoom:normal;	等同於zoom:1;

雖然谷歌等瀏覽器支持了zoom但是zoom並不是標准的屬性

css3中transform的scale

transform中的scale是明確的寫到規范里面的，從ie9到其他的瀏覽器都支持

scale有專門的x,y方向的控制

和zoom不同的是scale不支持百分比和normal,只能是數值和負值

差異

1. zoom的縮放是基於左上角的，而scale默認是居中縮放的
2. zoom的縮放改變了元素占據空間的大小，scale縮放占據的原始尺寸不變，頁面的布局不會發生變化
3. 兩者對元素渲染的計算方法不一樣
4. 對文字的縮放規則不一樣，zoom縮放受限制於最小12px字體的大小，而scale是純粹的對圖形進行了比例來控制
5. 渲染性能的差異
6. 由於zoom的縮放會改變元素的真實空間的大小，會影響到其他的元素，在文檔流中zoom加在任意一個元素身上都會導致頁面的重新渲染，而scale加在任意一個元素身上只會在當前的元素上重繪，使用scale的元素尺寸是不變的，但是zoom會改變其原來的尺寸

使用的代碼如下：

@media screen and (max-width: 1300px){
    body{
      zoom:0.9;
   }
}
@media screen and (max-width:1200px){
    body{
        zoom: 0.85;
    }
}
@media screen and (max-width: 1100px){
    body{
      zoom:0.75;
   }
}
@media screen and (max-width: 1000px){
    body{
      zoom:0.7;
   }
}