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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。