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缩放占据的原始尺⼨不变，页⾯的布局不会发⽣变化html横向滚动条样式
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;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。