谈谈关于CSS中transform属性之scale

谈谈关于scale属性

scale是什么?

根据W3C定义 ,scale主要是进行缩放和转化:

scale能做什么?

1.1px细线

CSS代码

.wrap{        position: relative;}.UI_scale1{    position: relative;    width: 200px;    height: 50px;    border-bottom:1px solid # 000;}.UI_scale2{    position:relative;    top: 0px;    left: 0px;    width: 200px;    height: 50px;    border-bottom: 1px solid # 000;}@media screen and (-webkit-min-device-pixel-ratio:2){    .UI_scale2{        transform: scale(1,0.5);        transform-origin:left center;    }}

2.页面适配

  function scale(){          var origin_H = 667,              origin_W = 375,              win_H = $(window).height(),              win_W = $(window).width();          var ratio1 =  win_H / origin_H ,              ratio2 =  win_W / origin_W ;          if(ratio1

CSS代码

.wrap{        position: relative;        background-color: # ccc;}.UI_scale1{    position: relative;    top: 0px;    width: 100px;    height: 50px;    font-size:14px;    line-height: 24px;    margin-left: 50px;    padding: 50px;    border-bottom:1px solid # 000;    background-color: red;}.UI_scale2{    position: relative;    top: 0px;    width: 100px;    height: 50px;    font-size:14px;    line-height: 24px;    margin-left: 50px;    padding: 50px;    border-bottom:1px solid # 000;    transform: scale(0.5);    background: blue;    transform-origin: center center;}

如图所示可以直接影响到所有带px的属性,但是由于scale属性不会引起重排,会导致父元素的高度和宽度都不会受到影响.

scale和zoom差异

1.zoom引起重排,scale不会引起;缩放的中心点,zoom不能更改,而scale可以更改

2.重排导致的性能

1.scale会只会引起了当前元素

2.zoom会引起重排,所以会影响全部元素

关键字:css, html, scale, scale3d

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部