成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

zoom和transform:scale()的區(qū)別

muddyway / 2422人閱讀

摘要：的取值可以為數(shù)值和百分比值，不能取負(fù)值。而只是在當(dāng)前元素上重繪，不會影響其他元素。其他如果被縮放的元素是寬高是以為單位，那么作用在該元素上無效，除了文字或者不是以為單位的子元素，而表現(xiàn)則正常。

zoom和transform:scale()都可以用于縮放，目前移動(dòng)端存在各種各樣不同屏幕大小的手機(jī)，為了兼容不同寬度的屏幕，我們可以基于某一屏幕寬度大?。ū热鏸Phone5的320，這個(gè)根據(jù)設(shè)計(jì)稿來）做出頁面后，再對頁面進(jìn)行縮放以兼容其他屏幕寬度。

定義

zoom和transform:scale()具體有什么區(qū)別呢？先來看看官方的定義：

Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.

zoom相當(dāng)于是一個(gè)放大鏡，縮放被zoom的元素不會影響初始或?qū)嶋H視口的大小。
zoom的取值可以為數(shù)值和百分比值，不能取負(fù)值。

A transformation is applied to the coordinate system an element renders in through the transform property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix like defined in Mathematical Description of Transform Functions, then multiplying the matrices.

先來看看transform的定義，transform的值是基于坐標(biāo)系統(tǒng)的，transform的變換過程實(shí)際上是矩陣變換的過程，被transform的元素要經(jīng)過一系列的矩陣運(yùn)算最終確定其坐標(biāo)。

The value of the transform property is a list of transform-function...specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first.

scale()是transform的一個(gè)屬性值，這是一個(gè)縮放函數(shù)。當(dāng)一個(gè)元素被定義了transform:scale(x,y)，可以控制其x方向和y方向上的縮放比例，如果只有一個(gè)參數(shù)，那么第二個(gè)參數(shù)與第一個(gè)參數(shù)相等。
scale的取值只能是數(shù)值，但是可以為負(fù)數(shù)。

實(shí)際應(yīng)用

先來看一個(gè)簡單的demo

兼容問題

從demo中可以看出zoom縮放是相對于左上角的，而scale默認(rèn)是相對于元素的中心點(diǎn)縮放的，scale可以通過設(shè)置transform-origin來改變縮放的相對位置，當(dāng)設(shè)置transform-origin: 0 0時(shí)，scale縮放可以達(dá)到和zoom縮放相似的結(jié)果。
前面提到縮放可以應(yīng)用于移動(dòng)端各種不同寬度的屏幕的適配上，那么我們就來看看zoom縮放和scale縮放在屏幕適配上的具體差異。下圖從左到右分別是：無縮放在iPhone5上的表現(xiàn)，zoom:1.17在iPhone6上的表現(xiàn)，transform:scale(1.17)在iPhone6上的表現(xiàn)。

代碼如下：
HTML

CSS

html,body {height: 100%;}
.container {height: 100%;}
.box {height: 160px; font-size: 20px; text-align: center;}
.red {background-color: rgba(255,0,0,.5);}
.blue {background-color: rgba(0,0,255,.5);}

外層容器寬高為100%，占滿整個(gè)屏幕。因?yàn)閦oom是作用在body下面的這個(gè)占滿了整個(gè)屏幕的容器上，根據(jù)定義我們可以說在這里使用zoom其實(shí)是縮放了整個(gè)屏幕（也就是視口），其實(shí)就跟在瀏覽器中放大頁面的效果一樣：

那么scale為什么會出現(xiàn)滾動(dòng)條呢？根據(jù)transform的定義，transform的變換過程是基于坐標(biāo)系統(tǒng)的，也就是說，外層容器在縮放前四個(gè)角的坐標(biāo)分別為(0,0),(100%,0),(0,100%),(100%,100%),經(jīng)過以(0,0)為變換中心的scale之后，四個(gè)角的坐標(biāo)變?yōu)?0,0),(117%,0),(117%,0),(117%,117%)，超出了視口本身的大小，所以出現(xiàn)了滾動(dòng)條。
這么看起來，好像兼容的時(shí)候就應(yīng)該用zoom了呢！一開始我也是這么想的，但是后來經(jīng)過同事的指點(diǎn)，scale的問題也是有解決辦法的：那就是給外層容器，即要縮放的那個(gè)元素，設(shè)置固定的寬高。注意，不是百分比，而是要設(shè)置絕對值！比如，設(shè)計(jì)稿是按照iPhone5的屏幕大小來做的，那么就給外層容器設(shè)置width: 320px; height: 504px;，這樣設(shè)置之后再用scale就不會出現(xiàn)滾動(dòng)條了。當(dāng)然，用zoom也是一樣的效果。

渲染

從上面的demo中還可以看出被縮放的元素的寬高用js獲取時(shí)還是縮放前的原始寬高，但是，在審查元素時(shí)zoom和scale還是有區(qū)別的：

zoom還有一點(diǎn)比較詭異，戳demo，當(dāng)元素的寬度不顯式設(shè)置（即默認(rèn)100%）或者設(shè)置為百分比，用zoom對元素縮小之后寬度竟然比原來大了！大了！了！如果是放大的話寬度就會比原來?。⌒?！
所以，如果你要獲取元素縮放之后的寬高，用zoom似乎是比較麻煩的。scale的話就比較簡單了，只要把用js獲取到的寬高*縮放的倍數(shù)就是元素縮放之后的實(shí)際寬高了。
另外，zoom對性能不友好，會影響到頁面中的其他元素，在文檔流中給任一元素加上zoom會引起整個(gè)頁面的重新渲染。從最開始的demo中就可以看到被zoom的元素的父元素的高度明顯小了。而scale只是在當(dāng)前元素上重繪，不會影響其他元素。

其他

如果被縮放的元素是寬高是以rem為單位，那么zoom作用在該元素上無效，除了文字或者不是以rem為單位的子元素，而scale表現(xiàn)則正常。demo看這里

所以，到底是用zoom還是scale，還是要具體情況具體分析。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112612.html

相關(guān)文章

  • 仿寫輪眼修改版

    摘要：圖片失效補(bǔ)回去純制作寫輪眼開眼及進(jìn)化過程原作者已經(jīng)找不到了只能直接貼搜到的轉(zhuǎn)帖這是以前貪好玩跟著別人做出來練手的，結(jié)構(gòu)都一樣，主要是加個(gè)背景修改細(xì)節(jié)跟動(dòng)畫而已，輪回眼部分有些溢出，但是現(xiàn)在不往動(dòng)畫研究就懶得改了，圖個(gè)一樂吧。 PS: 2018/06/07 圖片失效,補(bǔ)回去. 純css3制作寫輪眼開眼及進(jìn)化過程原作者已經(jīng)找不到了,只能直接貼搜到的轉(zhuǎn)帖.這是以前貪好玩跟著別人做出來練手...

    LeviDing 評論0 收藏0

  • 仿寫輪眼修改版

    摘要：圖片失效補(bǔ)回去純制作寫輪眼開眼及進(jìn)化過程原作者已經(jīng)找不到了只能直接貼搜到的轉(zhuǎn)帖這是以前貪好玩跟著別人做出來練手的，結(jié)構(gòu)都一樣，主要是加個(gè)背景修改細(xì)節(jié)跟動(dòng)畫而已，輪回眼部分有些溢出，但是現(xiàn)在不往動(dòng)畫研究就懶得改了，圖個(gè)一樂吧。 PS: 2018/06/07 圖片失效,補(bǔ)回去. 純css3制作寫輪眼開眼及進(jìn)化過程原作者已經(jīng)找不到了,只能直接貼搜到的轉(zhuǎn)帖.這是以前貪好玩跟著別人做出來練手...

    Alex 評論0 收藏0

  • 有效解決 css sprite 圖片使用 rem 單位邊角缺失的問題

    摘要：起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。例如原本提高倍寫成這樣瀏覽器解析就會準(zhǔn)確多了。下面提到的辦法就是的方案怎么做思路單位數(shù)值變大了，整體也會變得很大，需要縮小回原來的尺寸。本文同時(shí)發(fā)布在的博客 起因 showImg(https://segmentfault.com/img/remote/1460000008910041?w=702&h=403); showImg(https://s...

    tunny 評論0 收藏0

  • 不同分辨率的電腦下，絕對定位錯(cuò)亂解決辦法

    摘要：有時(shí)候我們在寫頁面中，會發(fā)現(xiàn)絕對定位的父級元素已經(jīng)相對定位了，但是在不同分辨率的電腦下，絕對定位還是會錯(cuò)亂，似乎父級的相對定位并沒有起了作用。 有時(shí)候我們在寫頁面中，會發(fā)現(xiàn)絕對定位的父級元素已經(jīng)相對定位了，但是在不同分辨率的電腦下，絕對定位還是會錯(cuò)亂，似乎父級的相對定位并沒有起了作用。 筆記本電腦的分辨率一般為1366768附近，PC電腦的分辨率一般為 19201080；此鏈接為常見電...

    wpw 評論0 收藏0

  • 不同分辨率的電腦下，絕對定位錯(cuò)亂解決辦法

    摘要：有時(shí)候我們在寫頁面中，會發(fā)現(xiàn)絕對定位的父級元素已經(jīng)相對定位了，但是在不同分辨率的電腦下，絕對定位還是會錯(cuò)亂，似乎父級的相對定位并沒有起了作用。 有時(shí)候我們在寫頁面中，會發(fā)現(xiàn)絕對定位的父級元素已經(jīng)相對定位了，但是在不同分辨率的電腦下，絕對定位還是會錯(cuò)亂，似乎父級的相對定位并沒有起了作用。 筆記本電腦的分辨率一般為1366768附近，PC電腦的分辨率一般為 19201080；此鏈接為常見電...

    dunizb 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<