无锡做网站网页内文字如何拉长和压扁

前段时间给客户做的网站客户反应在不同浏览器下文字有被压扁的情况，那么在网页中怎样强制对文字进行压扁和拉伸呢？

下面，马氪软件就为大家简单介绍一下。其实文字的变化，这边涉及到一个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，还是要具体情况具体分析。 

声明：除非注明，本站内容由无锡网站建设马氪软件原创发布©，转载请联系我们授权合作。