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

张吉林
  • 31

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

回复
阅读 1.5k
2 个回答
✓ 已被采纳

关于 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

1920*1200的ipad设计图,这个ui会设计吗?
ipad设计尺寸

手机端常用设计尺寸


当然,你的问题楼上回答很精确,可以直接在页面头部使用他写的计算方式,来换算rem跟px
为什么要强调写在头部,因为根据页面加载顺序,如果放在head后面的话,刷新页面,会有暂时性样式错乱的问题,必须放置在head里边

宣传栏