移动端适配完之后，在小屏幕上字体小于12px, 但实际按12px渲染，极限情况下可能导致布局错乱

问题说明

前提

假设UI给你的设计稿是750的，你本地开发也在750的浏览器视口下进行。

重现问题

假设你采用的rem方式适配，在750的设计稿上，有段文字的字体大小是20px，那么在375的浏览器视口下，理论上来说，这段文字的字体大小应该将被设置为10px，但chrome浏览器，最小字体大小为12px，即使你设置成了10px，那实际渲染的大小也是12px

优先与UI沟通，告知UI，浏览器最小字体为12px，小于12px的会按12px渲染，可能会导致布局出问题。让ui调整字体大小，以达到即使在375的视口大小下，依然保证最小字体为12px
如果平等沟通无效，应该尝试向上级反馈，将技术原理再重述一遍，再说明，一定要显示小于12px的字体，前端单独适配会增加大量的工作量。吃力不讨好。
如果前2步都无效，那就只能前端单独适配了。但记得要求增加工时，否则，你只能无偿加班了。

通过css的transfrom:scale(缩放倍数)来解决，但scale只是将显示效果缩放了，元素的实际占用空间并未改变，如果要连同实际占位空间也改变的话，那要在外部再套一层盒子，使这个套的盒子大小为缩放之后的预期大小，并将overflow设置为hidden

移动端项目开发前，尽量和ui约定好，最小视口宽度下(375px)，最小字体应该是12px，最小边框宽度粗细应该是1px，最小尺寸应该是1px。这样能提前避免很多编码阶段的适配问题。

更确切的约束是

假定UI设计稿图是750px的，那么最小字体24px（因为在375px宽度的视口下，就变成了12px），最小边框应该是2px（因为在375px宽度的视口下，就变成了1px），最小尺寸应该是2px（理由和最小边框一致）

或者让ui直接给你375的设计稿。那最小字体应该是12px，最小边框宽度粗细应该是1px，最小尺寸应该是1px。就不用转换后再想一遍了。