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

问题说明

前提

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

重现问题

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

会产生什么问题

  • 可能会影响布局

解决方案

  1. 优先与UI沟通,告知UI,浏览器最小字体为12px,小于12px的会按12px渲染,可能会导致布局出问题。让ui调整字体大小,以达到即使在375的视口大小下,依然保证最小字体为12px
  2. 如果平等沟通无效,应该尝试向上级反馈,将技术原理再重述一遍,再说明,一定要显示小于12px的字体,前端单独适配会增加大量的工作量。吃力不讨好。
  3. 如果前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)

rem 前端字体_前端浏览器字体小于12px的解决办法-CSDN博客

解决前端浏览器字体小于12px办法-腾讯云开发者社区-腾讯云 (tencent.com)

相关推荐
懒大王爱吃狼42 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js