html中scale布局,谈谈关于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

$('.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代码

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会引起重排，所以会影响全部元素