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

在笔者开发某个我的项目时突发奇想：如果理论须要11px的字体大小怎么办？这在Chrome中是实现不了的。对于字体，一开始想到的就是rem等非px单位。然而rem只是为了响应式适配，并不能冲破这一限度。

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

这条路走不通，就只剩下一个办法：扭转视觉大小而非理论大小。

实践根底

css中有一个属性：transform: scale();

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

默认状况下，scale(x, y)：以x/y轴进行缩放；如果y没有值，默认y==x；
也能够离开写：scaleX() scaleY() scaleZ()，离开写的时候，能够对Z轴进行缩放

第二种写法：transform: scale3d(x, y, z)该写法是下面的办法的复合写法，后果和下面的一样。

但应用这个属性要留神一点：scale 缩放的时候是以“缩放元素所在空间的中心点”为基准的。
所以如果用在扭转元素视觉大小的场景下，个别还须要利用另一个元素来“复原地位”：

transform-origin: top left;

语法上说，transform-origin 领有三个属性值：

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

默认为：

transform-origin:50% 50% 0;

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

理论利用

<div class="mmcce__info-r">  <!-- 一些html构造 -->  <div v-show="xxx" class="mmcce-valid-mj-period" :class="{'mmcce-mh': showStr}" @click="handleShowStr"> <!-- click中事件管制展现与否 -->    <div class="mmcce-valid-period-child">{{couponInfo.startTimeFormat}}-{{couponInfo.endTimeFormat}}</div><!-- 父级构造，点击显示上面内容 -->    <div class="mmcce-valid-pro" ref="mmcceW" :style="{opacity: showStr ? 1 : 0}">      <!-- 上面内容在前面有解说 -->      <div class="mmcce-text"         v-for="(item, index) in couponInfo.thresholdStr"         :key="index"         :index="index"        :style="{height: mTextH[index] + 'px'}"      >{{item}}</div>    </div>  </div></div>
.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 须要明确规定缩放元素的height值！

下面代码中为什么.mmcce-valid-mj-period类中要用max-height ？为什么对开展元素中的文字类.mmcce-text中应用height？
我将类.mmcce-text中的height去掉后，看下成果：

OK，能够看到，占高没有按咱们想的“被缩放”。影响到了上面的元素地位。

实质上是“视觉大小扭转了但理论大小无变动”。

这一点须要留神，一般来说，给被缩放元素显式设置一个大于等于其font-size的高度值即可。

缩放带来的其它问题

可能在很多人应用的场景中是不会思考到这个问题的：被缩放元素限度高度当前如果元素换行那么会呈现文字重叠的景象。

为此，我采纳了在mounted生命周期中获取父元素宽度，而后动静计算是否须要换行以及换行的行数，最初用动静style从新渲染每一条数据的height值。
这里有三点须要留神：

  1. 这里用的是一种取巧的办法：用每个文字的视觉font-size值*字符串长度。因为笔者遇到的场景不会呈现问题所以能够这么用。在不确定场景中更举荐用canvas或dom理论计算每个字符的宽度再做判断（须要晓得文字、字母和数字的宽度是不一样的）；
  2. 须要留神一些非凡机型的展现，比方三星的galaxy fold，这玩意是个折叠屏，它的计算会和个别的屏幕计算的不统一；
  3. 在vue生命周期中，mounted能够操作dom，但不能获取理论dom元素；你能够通过this.$el获取元素。但要留神：在这个期间被获取的元素不能用v-if（即：必须存在于虚构tree中）。这也是下面代码中笔者应用v-show和opacity的起因。
对于第三点，这里有个机会问题。比方刚进入页面时要展现弹窗，弹窗是一个组件。那你在index.vue中是获取不到这个组件的。（这个和v-if还是v-show没有关系）然而你能够将比方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<thresholdStr.length;i++) {    // 11是指缩放后文字的font-size值，这是一种取巧的形式    if(11*(thresholdStr[i].length) > 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;},