zoom与scale的异同

时间 2019-12-06

标签 zoom scale 异同栏目 CSS 繁體版

原文原文链接

zoom与scale的异同点

做为一名前端，尤为是页面要兼容ie浏览器的前端，确定对着两个属性都很熟悉。css

zoom和scale都是css中经常使用的放大和缩小一个元素的方法，在scale尚未成为css3标准以前，咱们“惟一”能用来放大和缩小一个元素的方法也就是zoom。不过这个属性兼容性很差，由于这个属性是ie发明的，其余浏览器厂商都喜欢跟ie对着干，对这个属性不怎么感冒，因此不怎么支持。这就致使同一个页面在不一样的浏览器上显示有差异。终于有一天css的亲爹w3c看不下去了，叽咕了半天，定了一个scale的标准属性，来实现元素的放大和缩小。scale是缩写，它完整名字是transform:scale(x);html

zoom和scale都是用来放大和缩小元素的，可是它的效果和使用方式有很大的差异，最近用获得，就研究下，它们的不一样点以下前端

1.兼容性问题

zoom不是css的标准属性，Firefox和Opera Mini 不支持，其余标准的浏览器却是均可以很好的支持。ie从ie6之后就开始支持这个属性。这个属性用起来有风险，好比要考虑Firefox的兼容性问题。css3

tranform:scale(x) 则是css的标准属性，除Opera Mini外，获得了几乎全部标准浏览器的支持。ie浏览器是在ie11后开始支持，不过ie9和ie9之后的浏览器都支持带前缀的属性-ms-transform。若是你的网页要兼容ie8及其之前的ie浏览器，就须要作兼容性处理，其实更好的办法是离职吧，如今都什么时代了，怎么可能还要兼容这么古老的浏览器，固然了，我是开玩笑的，毕竟你穷，怎么能够轻易离职。web

2.取值问题

zoom的取值能够normal，能够是大于等于0的浮点数，也能够是大于等于0的百分比。其中normal就是元素实际的尺寸，不缩也不放，安安静静的像一个处子。当zoom的值为0时，zoom也是不缩也不放，跟zoom为1的状况同样浏览器

transform:scale(x)的取值只能是数字，不能是百分比或者其余，可是取值能够是正数也能够是负数和0。其中x为0的时候，元素直接缩到消失不见了。x为负数的时候，元素会顺时针旋转180度，也多是逆时针，我也不知道反正上下颠倒了。我指的是2d平面，3d的平面我没研究。性能

并且scale是可使用scaleX()、scaleY()、scaleZ()单独放大x、y、z不一样轴。zoom只能等比放大。spa

3.显示效果

3.1缩放点

zoom是以左上角有原点进行缩放的，而且默认这个点还不能改变。若是要要实现中心的放大缩小的效果就须要动用下js动态改变元素的位置，或者你要是个牛逼哄哄的人，你就能够考虑使用ie的矩阵变换。虽然我高考数学不低130，可是我仍是看不懂ie的矩阵变换究竟是咋回事。3d

transfrom:scale(x)的变化默认是以中心点为准变化的，并且这个变化的点是能够经过transform-origin进行改变。code

3.2位置

zoom缩放后的元素是占据实际位置的。好比zoom的元素后紧跟一个名字叫other的div。元素被放大后名字叫other的div也被挤下去了。

而scale缩放的元素是不占据实际位置的，被scale放大的元素，看起来很大，可是实际占据的位置仍是以前那么小。因此其余元素并不会所以而改变位置。

还有一点须要注意，虽然scale被放大的元素不占据实际位置，可是仍是能够响应事件的。

不管元素是使用zoom放大缩小仍是使用scale放大缩小，元素上绑定点击事件的话，点击元素都会响应事件的。

4.性能

由于zoom是实际改变物体大小的，并且这种改变会影响到其余元素，因此使用zoom的时候会引发浏览器从新渲染，性能较低。而scale是单独只改变目标元素，并不会影响到其余的元素，因此性能会好一些。

5.点击查看页面效果

点击查看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>room&scale</title>
    <style>
        
        html,body{
            margin: 0px;
            padding:0px;
        }
        div{
            text-align: center;
        }
        h2{
            text-align: center;
            padding-bottom: 20px;
            margin:0px;
            border-bottom: 1px dashed black;
        }
        .content{
            width: 100px;
            margin: auto;
            height: 2000px;
            border-left:1px solid black;
            position: relative;
        }
        /*zoom*/
        .zoomW{
            position: relative;
        }
        .div1{
            width: 100px;
            height:100px;
            top:0px;
            left:0px;
            position: absolute;
            border: 1px solid blue;
        }
        .div2{
            width: 100px;
            height: 100px;
            zoom:2;
            top:0px;
            left:0px;
            position: absolute;
            border: 1px solid green;
        }
        .div3{
            width: 100px;
            height: 100px;
            zoom:4;
            top:0px;
            left:0px;
            position: absolute;
            border: 1px solid red;
        }
        .div4{
            width: 50px;
            height: 50px;
            border: 1px solid yellow;
        }
        /*scale*/
        .zoomT2,.scaleT{
            margin-top:600px;
        }
        .scaleW{
            position: relative;
            
        }
        .scaleW div{
            /*transform-origin:0 0;*/
        }
        .div5{
            width: 100px;
            height:100px;
            top:0px;
            left:0px;
            position: absolute;
            border: 1px solid blue;
        }
        .div6{
            width: 100px;
            height: 100px;
            transform: scale(2);
            -webkit-transform: scale(2);
            top:0px;
            left:0px;
            position: absolute;
            border: 1px solid green;
        }
        .div7{
            width: 100px;
            height: 100px;
            -webkit-transform: scale(4);
            top:0px;
            left:0px;
            position: absolute;
            border: 1px solid red;
        }
        .div8{
            width: 50px;
            height: 50px;
            border: 1px solid yellow;
        }
        .other{
            width: 100px;
            height: 100px;
            border:1px solid darkblue;
        }
        .zoomO1{
            width: 100px;
            height: 100px;
            zoom:1;
            outline: 1px solid blue;
        }
        .zoomO2{
            width: 100px;
            height: 100px;
            zoom:2;
            outline: 1px solid green;
        }
        .scaleO1{
            width: 100px;
            height: 100px;
            outline: 1px solid blue;
        }
        .scaleO2{
            width: 100px;
            height: 100px;
            transform: scale(2);
            -webkit-transform: scale(2);
            outline: 1px solid green;
        }
    </style>

</head>
<body>
    <div class="content">
        <div class="zoomT">
            <h2>zoom</h2>
        </div>
        <div class="zoomW">
            <div class="div1">
                div1
            </div>
            <div class="div2">
                div2
            </div>
            <div class="div3">
                div3
                <!-- <div class="div4">
                    div4
                </div> -->
            </div>
            
        </div>
        
        <div class="scaleT"><h2>scale</h2></div>
        <div class="scaleW">
            
            <div class="div5">
                div5
            </div>
            <div class="div6">
                div6
            </div>
            <div class="div7">
                div7
                <!-- <div class="div8">
                    div8
                </div> -->
            </div>
            
        </div>
        <div class="zoomT2"><h2>zoom&other</h2></div>
        <div class="zoomOther">
            <div class="zoomO1">
                zoom：1
            </div>
            <div class="other">
                
            </div>
            <div class="zoomO2">
                zoom：2
            </div>
            <div class="other">
                other
            </div>
        </div>
        <div class="scaleT"><h2>scale&other</h2></div>
        <div class="scaleOther">
            <div class="scaleO1">
                scale(1)
            </div>
            <div class="other">
                other
            </div>
            <div class="scaleO2">
                scale(2)
            </div>
            <div class="other">
                other
            </div>
        </div>
        
    </div>
    <script>
        var zoomO2 = document.querySelector(".zoomO2");
        zoomO2.onclick=function(){
            console.log("zoomO2");
        }
        var scaleO2 = document.querySelector(".scaleO2");
        scaleO2.onclick=function(){
            console.log("scaleO2");
        }
    </script>
</body>
</html>