谈谈关于scale属性

scale是什么？

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

scale能做什么？

1.1px细线

  <div class="wrap">
      <div class="UI-scale1"></div>
      <div class="UI-scale2"></div>
      <div class="UI-scale3"></div>
    </div>


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<ratio2){
              $('.page1-wrap').css({
                '-webkit-transform':'scale('+ratio1+')'
              })
          }
          else{
              $('.page1-wrap').css({
                '-webkit-transform':'scale('+ratio2+')'
              })
          }
    }


3.动画(参考animate.css)

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}


scale的属性会影响那些属性和布局

HTML代码

  <div class="wrap">
      <div class="UI-scale1"></div>
      <div class="UI-scale2"></div>
      <div class="UI-scale3"></div>
    </div>


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