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

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

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

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

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

一 CSS3 transform屬性

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

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

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

二 zoom和transform對比

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

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

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

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

看個(gè)示例： 代碼如下：

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

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

三 兼容性考慮

zoom縮放是相對于左上角的，而scale默認(rèn)是相對于元素的中心點(diǎn)縮放的，scale可以通過設(shè)置transform-origin來改變縮放的相對位置，當(dāng)設(shè)置transform-origin: 0 0時(shí)，scale縮放可以達(dá)到和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)換。

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