欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css中网页缩放属性zoomtransform中的scale

程序员文章站 2024-01-19 12:45:16
...

如果项目的版心是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;
   }
}
相关标签: css 缩放