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

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

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

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

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

scale的取值只能是數值，但是可以為負數。

一 CSS3 transform屬性

這邊做網頁設計的朋友可能會問，那么zoom不可以嗎？

zoom相當于是一個放大鏡，縮放被zoom的元素不會影響初始或實際視口的大小。

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

二 zoom和transform對比

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

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

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

另外，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下面的這個占滿了整個屏幕的容器上，根據定義我們可以說在這里使用zoom其實是縮放了整個屏幕（也就是視口），其實就跟在瀏覽器中放大頁面的效果一樣。

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

三 兼容性考慮

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

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

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