CSS解决浏览器显示的最小字号为12px的问题

以Chrome为例，可以看到浏览器默认的最小字号是12px

 让用户改浏览器的设置是不合理的，因此我们从代码入手。

scale()函数是css3新增的功能，用于在页面上放大或缩小元素，具体用法参见MDN Web Docs

案例：

将段落元素p缩放至原来的0.5倍（行内元素需要转换为块级元素）

p {
    font-size: 16px;
    transform: scale(0.5);  /* 字体显示效果为8px */
}

缩放前

缩放后

可以看到，虽然达到了想要的字体大小，但是页面元素的布局并未改变，

（有网友提供另一个方法，使用zoom属性，但是它不属于web标准，不推荐使用。）

优化方案：使用负外边距

p {
    font-size: 16px;
    transform: scale(0.5);  /* 字体显示效果为8px */
    margin: 0 -20px;  /* 调整左右外边距 */
}

 优化后的效果