问题说明
前提
假设UI给你的设计稿是750的,你本地开发也在750的浏览器视口下进行。
重现问题
假设你采用的rem方式适配,在750的设计稿上,有段文字的字体大小是20px,那么在375的浏览器视口下,理论上来说,这段文字的字体大小应该将被设置为10px,但chrome浏览器,最小字体大小为12px,即使你设置成了10px,那实际渲染的大小也是12px
会产生什么问题
- 可能会影响布局
解决方案
- 优先与UI沟通,告知UI,浏览器最小字体为12px,小于12px的会按12px渲染,可能会导致布局出问题。让ui调整字体大小,以达到即使在375的视口大小下,依然保证最小字体为12px
- 如果平等沟通无效,应该尝试向上级反馈,将技术原理再重述一遍,再说明,一定要显示小于12px的字体,前端单独适配会增加大量的工作量。吃力不讨好。
- 如果前2步都无效,那就只能前端单独适配了。但记得要求增加工时,否则,你只能无偿加班了。
如何显示小于12px的字体
通过css的transfrom:scale(缩放倍数)
来解决,但scale只是将显示效果缩放了,元素的实际占用空间并未改变,如果要连同实际占位空间也改变的话,那要在外部再套一层盒子,使这个套的盒子大小为缩放之后的预期大小,并将overflow设置为hidden
transform等比缩放后,实际占用空间修改_transform scale(10/24) 后 占位置如何处理-CSDN博客
最后
移动端项目开发前,尽量和ui约定好,最小视口宽度下(375px),最小字体应该是12px,最小边框宽度粗细应该是1px,最小尺寸应该是1px。这样能提前避免很多编码阶段的适配问题。
更确切的约束是
假定UI设计稿图是750px的,那么最小字体24px(因为在375px宽度的视口下,就变成了12px),最小边框应该是2px(因为在375px宽度的视口下,就变成了1px),最小尺寸应该是2px(理由和最小边框一致)
或者让ui直接给你375的设计稿。那最小字体应该是12px,最小边框宽度粗细应该是1px,最小尺寸应该是1px。就不用转换后再想一遍了。
参考资料
text-size-adjust - CSS:层叠样式表 | MDN (mozilla.org)
css3 - rem布局下,用户浏览器的最小字号是12px怎么办? - SegmentFault 思否
移动端rem小于12px文字-webkit-text-size-adjust - 知乎 (zhihu.com)