<meta name="source" content="aomao">

1. 現(xiàn)象是這樣的：

8px 或者更小的 vw\vh\rem 單位的字體大小都能實現(xiàn)，感覺違背 以前一直遵循的

“chrome有限制最小字體，為12px” 的事實
<meta name="source" content="aomao">

2. 說明原因

參考：(如何打破Chrome的最小字號限制)[https://www.pipipi.net/39672.html]

簡單來說（直接上原因）：

把最小字體設(shè)置成了0，就可以實現(xiàn) 0-12px的字體大小。

3. 正常實現(xiàn)小于最小字體大小12px

• css 的 transform 的 scale 縮放配置
• css 的 zoom 縮放進行配置

測試代碼如下：

<template>
  <div class="test">
    <p style="font-size: 30px">猜猜我多大？</p>
    <p style="font-size: 0.2rem">猜猜我多大？</p>
    <p style="font-size: 0.02vw">猜猜我多大？</p>
    <p class="box">猜猜我多大？</p>
    111<br />
    <p class="box box1">猜猜我多大？</p>
    111<br />
    <p class="box box2">猜猜我多大？</p>
    111<br />
  </div>
</template>

<script>
export default {
  name: 'test',
}
</script>

<style>
.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  font-size: 30px;
  background-color: antiquewhite;
  border: 1px solid blue;
}
.box1 {
  transform: scale(0.2);
}
.box2 {
  zoom: 0.2;
}
</style>

效果如下圖：（最小字體設(shè)為 20時）

其中 zoom 和 transform 還是有區(qū)別的。

https://blog.csdn.net/ligang2585116/article/details/78745675

1. 縮放的相對位置：zoom 相對左上角;scale 相對中心位置（通過 transform-origin 修改基準點）。
2. 縮放之后布局大小：zoom改變了元素占據(jù)的大小; scale 是元素實際占據(jù)不變，內(nèi)容縮放在中間。
3. 兼容性。firefox下不支持zoom；scale針對IE9+。