如何突破浏览器12px限制

2022-03-09 作者: 云小梦

目前Chrome浏览器依然没有放开的限制，但Chrome仍然是使用人数最多的浏览器。

在笔者开发某个项目时突发奇想：如果实际需要的字体大小怎么办？这在Chrome中是实现不了的。关于字体，一开始想到的就是rem等非px单位。但是只是为了响应式适配，并不能突破这一限制。

em、rem等单位只是为了不同分辨率下展示效果提出的换算单位，常见的库也只是利用了js将转为。包括微信小程序提出的单位也是一样！

这条路走不通，就只剩下一个方法：改变视觉大小而非实际大小。

理论基础

css中有一个属性：

值的绝对值>1，就是放大，比如2，就是放大2倍
值的绝对值 0<值<1，就是缩小，比如0.5，就是原来的0.5倍；
值的正负，负值表示图形翻转。

默认情况下，：以x/y轴进行缩放；如果y没有值，默认；也可以分开写：scaleX() scaleY() scaleZ()，分开写的时候，可以对Z轴进行缩放

第二种写法：该写法是上面的方法的复合写法，结果和上面的一样。

但使用这个属性要注意一点：scale 缩放的时候是以“缩放元素所在空间的中心点”为基准的。所以如果用在改变元素视觉大小的场景下，一般还需要利用另一个元素来“恢复位置”：

transform-origin: top left;

语法上说，拥有三个属性值：

transform-origin: x-axis y-axis z-axis;

默认为：

transform-origin:50% 50% 0;

属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。作用就是更改一个元素变形的原点。

实际应用


  
   
    {{couponInfo.startTimeFormat}}-{{couponInfo.endTimeFormat}}

    
      
      {{item}}

.mmcce-valid-mj-period {
  max-height: 15px;
  transition: all .2s ease;

  &.mmcce-mh {
    max-height: 200px;
  }

  .mmcce-valid-pro {
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;

    .mmcce-text {
      width: 200%; // !
      font-size: 22px;
      height: 15px;
      line-height: 30px;
      color: #737373;
      letter-spacing: 0;
      transform       : scale(.5);
      transform-origin: top left;
    }
  }
}

.mmcce-valid-period-child {
  position: relative;
  width      : 200%;
  white-space: nowrap;
  font-size  : 22px;
  color      : #979797;
  line-height: 30px;

  transform       : scale(.5);
  transform-origin: top left;

  //xxx
}

可以明确说明的是，这样的 hack 需要明确规定缩放元素的值 ！！！

上面代码中为什么类中要用？为什么对展开元素中的文字类中使用？我将类中的去掉后，看下效果：

（使用是一样的效果）

OK，可以看到，占高没有按我们想的“被缩放”。影响到了下面的元素位置。

本质上是“视觉大小改变了但实际(占位)大小无变化”。这时候，宽高实际也被缩放了的。这一点通过代码中也可以看出来。或者你设置了也可以有相应的效果！

这一点需要注意，一般来说，给被缩放元素显式设置一个大于等于其的值即可。

缩放带来的其它问题

可能在很多人使用的场景中是不会考虑到这个问题的：被缩放元素限制高度以后如果元素换行那么会出现文字重叠的现象。

为此，我采用了在生命周期中获取父元素宽度，然后动态计算是否需要换行以及换行的行数，最后用动态style重新渲染每一条数据的值。这里有三点需要注意：

关于第三点，这里有个时机问题。比如刚进入页面时要展示弹窗，弹窗是一个组件。那你在index.vue中是获取不到这个组件的。（这个和还是没有关系）但是你可以将比如header也拆分出来，然后在header组件的mounted中去调用弹窗组件暴露出的方法。

mounted(){
  let thresholdStr = this.info.dropDownTextList;
  let minW = false;
  if(this.$el.querySelector('.mmcce-valid-pro').clientWidth < 140) { // 以iPhone5位准，再小于其中元素宽度的的机型就要做特殊处理了
    minW = true
  }
  let mmcw = this.$el.querySelector('.mmcce-valid-pro').getBoundingClientRect().width;

  let mmch = [];

  for(let i=0;i mmcw) {
      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;
},