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

}