移动端适配完之后,在小屏幕上字体小于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)

相关推荐
彭世瑜10 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40411 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish11 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five12 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序12 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54113 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省14 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98515 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮16 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code16 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript