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;
   }
}