前段時間給客戶做的網(wǎ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)頁設計的朋友可能會問，那么zoom不可以嗎？zoom相當于是一個放大鏡，縮放被zoom的元素不會影響初始或?qū)嶋H視口的大小。zoom的取值可以為數(shù)值和百分比值，不能取負值。
二 zoom和transform對比
其實zoom和transform:scale()都可以用于縮放，目前移動端存在各種各樣不同屏幕大小的手機，為了兼容不同寬度的屏幕，無錫網(wǎng)站設計可以基于某一屏幕寬度大小（比如iPhone5的320，這個根據(jù)設計稿來）做出頁面后，再對頁面進行縮放以兼容其他屏幕寬度。如果被縮放的元素是寬高是以rem為單位，那么zoom作用在該元素上無效，除了文字或者不是以rem為單位的子元素，而scale表現(xiàn)則正常！如果你要獲取元素縮放之后的寬高，用zoom似乎是比較麻煩的。scale的話就比較簡單了，只要把用js獲取到的寬高*縮放的倍數(shù)就是元素縮放之后的實際寬高了。另外，zoom對性能不友好，會影響到頁面中的其他元素，在文檔流中給任一元素加上zoom會引起整個頁面的重新渲染?？磦€示例：代碼如下：
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可以通過設置transform-origin來改變縮放的相對位置，當設置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，還是要具體情況具體分析。原文轉(zhuǎn)載自：無錫做網(wǎng)站?http://mkapps.cn/
