谈谈关于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

版权声明

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