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

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

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

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

2. 說(shuō)明原因

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

簡(jiǎn)單來(lái)說(shuō)（直接上原因）：

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

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

• css 的 transform 的 scale 縮放配置
• css 的 zoom 縮放進(jìn)行配置

測(cè)試代碼如下：

<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時(shí)）

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

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

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