|
前段时间给客户做的网站客户反应在区别浏览器下文字有被压扁的状况，那样在网页中怎么样强制对文字进行压扁和拉伸呢？
下面，马氪软件就为大众简单介绍一下。
其实文字的变化，这边触及到一个CSS3属性transform，咱们再用scale进行赋值实现。
示例：transform: scale(1,1.18); 这个1-1.18比例等于便是文字横向和纵向的比，完全能够实现缩放。
scale()是transform的一个属性值，是一个缩放函数。当一个元素被定义了transform:scale(x,y)，能够掌控其x方向和y方向上的缩放比例，倘若仅有一个参数，那样第二个参数与第1个参数相等。
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 {bac公斤round-color: rgba(255,0,0,.5);}
.m2 {bac公斤round-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 十、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转换。
好了，马氪软件就把实现网页文字缩放简单介绍到这边。那样要进行元素的缩放到底是用zoom还是scale，还是要详细状况详细分析。
原文转载自：没锡做网站网页内文字怎样拉长和压扁-网站研发-没锡马氪软件
| 
发表于 2024-6-30 08:43:02
