狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

前段時間給客戶做的網(wǎng)站客戶反應(yīng)在不同瀏覽器下文字有被壓扁的情況，那么在網(wǎng)頁中怎樣強制對文字進行壓扁和拉伸呢？下面就為大家簡單介紹一下。

其實文字的變化，這邊涉及到一個CSS3屬性transform，我們再用scale進行賦值實現(xiàn)。

示例：transform: scale(1,1.18); 這個1-1.18比例等于就是文字橫向和縱向的比，完全可以實現(xiàn)縮放。

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

scale的取值只能是數(shù)值，但是可以為負數(shù)。

一 CSS3 transform屬性

這邊做網(wǎng)頁設(shè)計的朋友可能會問，那么zoom不可以嗎？

zoom相當于是一個放大鏡，縮放被zoom的元素不會影響初始或?qū)嶋H視口的大小。

zoom的取值可以為數(shù)值和百分比值，不能取負值。

二 zoom和transform對比

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

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

如果你要獲取元素縮放之后的寬高，用zoom似乎是比較麻煩的。scale的話就比較簡單了，只要把用js獲取到的寬高*縮放的倍數(shù)就是元素縮放之后的實際寬高了。

另外，zoom對性能不友好，會影響到頁面中的其他元素，在文檔流中給任一元素加上zoom會引起整個頁面的重新渲染。

看個示例： 代碼如下：

HTML部分

CSS部分

html,body {height: 100%;}

.container {height: 100%;}

.box {height: 160px; font-size: 20px; text-align: center;}

.m1 {background-color: rgba(255,0,0,.5);}

.m2 {background-color: rgba(0,0,255,.5);}

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

我們來看看zoom縮放和scale縮放在屏幕適配上的具體差異。下圖從左到右分別是：無縮放在iPhone5上的表現(xiàn)，zoom:1.17在iPhone6上的表現(xiàn)，transform:scale(1.17)在iPhone6上的表現(xiàn)。

三 兼容性考慮

zoom縮放是相對于左上角的，而scale默認是相對于元素的中心點縮放的，scale可以通過設(shè)置transform-origin來改變縮放的相對位置，當設(shè)置transform-origin: 0 0時，scale縮放可以達到和zoom縮放相似的結(jié)果。

CSS3 transform 屬性兼容性：Internet Explorer 10、Firefox、Opera 支持 transform 屬性。Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）。Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。Opera 只支持 2D 轉(zhuǎn)換。

好了，實現(xiàn)網(wǎng)頁文字縮放簡單介紹到這邊。那么要進行元素的縮放到底是用zoom還是scale，還是要具體情況具體分析。