如何根据设计图给定基准fontSize？

张吉林

3131120

发布于
2019-08-01

比如我现在得到一个ipad设计图，1920*1200
我给了baseSize是75rem，好像刚好合适。
如果是其他尺寸的设计图，我应该怎么计算这个基准fontSize

less

阅读 3.3k

2 个回答

gauseen

✓ 已被采纳

关于 rem 适配，基准字号（<html> 标签 fontSize）多少都可以，就是看哪个基准数字计算方便。

设计稿宽度为 750px，基准定为 100px = 1rem
- 为什么基准是 100px ?
- 答：基准为 100 好计算，其实多少都可以
- 例子：设计稿为 200px * 200px 的区域如何用 rem 表示？
- 答：200/100 = 2rem --> 2rem * 2rem

计算当前程序运行的浏览器基准为多少？
根据 设计稿宽度与当前屏幕宽度比例 计算基准字体大小：

const designWidth = 750 // 设计稿宽度
const deviceWidth = document.documentElement.clientWidth // 当前设备宽度
document.documentElement.style.fontSize = (deviceWidth / designWidth) * 100 + 'px' // 根字体大小

例如当前屏幕宽度为 deviceWidth = 375px
带入上面的逻辑运算即可得出 fontSize = 50px = 1rem
设计稿为 200px * 200px 的区域在当前屏幕下的宽度为 2rem * 2rem = (50 * 2) * (50 * 2) = 100px * 100px
所以适配后的区域宽高为 100px * 100px

在其他屏幕下也是同样的逻辑。

gauseen