当前位置: 首页 > Web前端 > JavaScript

如何突破浏览器的12px限制

时间:2023-03-26 23:33:38 JavaScript

目前Chrome浏览器还没有放开12px的限制,但是Chrome依然是使用人数最多的浏览器。笔者在开发某项目时突发奇想:如果我真的需要11px的字号怎么办?这在Chrome中是不可能的。关于字体,我首先想到的是rem等非px单位。但是rem只是响应式适配,无法突破这个限制。em和rem等单位只是为了在不同分辨率下显示效果而提出的转换单位。公共库px2rem只是用js将px转为rem。微信小程序提出的rpx单元也是如此!这种方法行不通,只有一种方法:改变视觉尺寸而不是实际尺寸。理论基础css中有一个属性:transform:scale();value的绝对值>1表示放大,比如2,放大2倍value的绝对值0{{couponInfo.startTimeFormat}}-{{couponInfo.endTimeFormat}}

{{item}}
.mmcce-valid-mj-period{最大高度:15px;过渡:所有.2s轻松;&.mmcce-mh{最大高度:200px;}.mmcce-valid-pro{显示:flex;弹性方向:列;填充底部:12px;.mmcce-text{宽度:200%;字体大小:22px;高度:15px;行高:30px;颜色:#737373;字母间距:0;变换:比例(.5);变换原点:左上;period-child{位置:相对;宽度:200%;空白:nowrap;字体大小:22px;颜色:#979797;行高:30px;变换:比例(.5);变换原点:左上角;//xxx}可以明确说明,这样的hack需要明确指定zoom元素的高度值!为什么上面代码中的.mmcce-valid-mj-period类中使用了max-height?为什么在扩展元素的文本类.mmcce-text中使用高度?我在.mmcce-text类中去掉高度后,看效果:OK,可以看到高度并没有像我们想的那样“缩放”,已经影响了下面元素的位置。本质上是“视觉尺寸改变但实际尺寸不变”。这一点需要注意。一般来说,为缩放元素显式设置一个大于或等于其字体大小的高度值就足够了。缩放带来的其他问题在很多人使用的场景中可能没有考虑到:缩放后的??元素高度被限制后,如果元素绕行,文字会重叠。为此,我曾经在挂载生命周期中获取父元素的宽度,然后动态计算是否需要换行和换行的行数,最后使用动态样式重新渲染高度每条数据的价值。这里需要注意三点:这里有一个取巧的方法:使用每段文字的视觉字体大小值*字符串长度。因为笔者遇到的场景不会出现问题,所以可以这样使用。在不确定的场景下,建议先用canvas或者dom实际计算出每个字符的宽度再做判断(要知道文字、字母和数字的宽度是不一样的);需要注意一些特殊机型的显示,比如三星的galaxyfold,这个东西是折叠屏,它的计算会和普通屏的计算不一致;在vue生命周期中,mounted可以操作dom,但是不能获取实际的dom元素;可以通过this.$el获取元素。但要注意:这期间获取的元素不能使用v-if(即:必须存在于虚拟树中)。这就是作者在上面的代码中使用v-show和opacity的原因。关于第三点,这里有一个时间问题。比如你刚进入页面的时候,你想显示一个弹窗,弹窗就是一个组件。那么你在index.vue中是获取不到这个组件的。(这与v-if或v-show无关)但是你可以拆分header,比如,然后在header组件的mounted中调用弹出组件暴露的方法。mounted(){让thresholdStr=this.info.dropDownTextList;让minW=假;if(this.$el.querySelector('.mmcce-valid-pro').clientWidth<140){//基于iPhone5标准,小于其中元素宽度的模型需要特殊处理。minW=true}letmmcw=this.$el.querySelector('.mmcce-valid-pro').getBoundingClientRect().width;让mmch=[];for(leti=0;immcw){if(minW){mmch[i]=Math.floor((11*thresholdStr[i].length)/mmcw)*15;}else{mmch[i]=Math.floor((11*(thresholdStr[i].length)+40)/mmcw)*15;}}else{mmch[i]=15;}}this.mTextH=mmch;},