$fontSize为啥定义为37.5
老师，请问 global.scss 里面的那个$fontSize为啥定义为37.5哦？
happyboy_tu4027881
2018-10-11
2 回答
你好，global.scss中设定了：
$ratio: 375 / 10;
@function px2rem($px) {
@return $px / $ratio + rem;
}这里$ratio值的设定是由用户决定的，可以根据自己的实际需要（或者UI设计稿）进行修改
这个值决定了px2rem输出的结果，如果设定为37.5，那么px2rem(20)，表示在375px宽度的屏幕下，显示为20px，计算方法如下：
第一步：375px宽度的屏幕，1rem=37.5px（因为在App.vue中指定了html的font-size=375px/10=37.5px，所以1rem=37.5px）
第二步：计算px2rem(20)=(20/37.5)rem
第三步：将rem转化为px：(20/37.5) * 1rem = 20/37.5 * 37.5px = 20px
如果屏幕为414px，那么px2rem(20)的计算结果为：
px2rem(20)=(20/37.5)*41.4px=22.08px
从而实现了自适应布局，因为px2rem(20)会随屏幕宽度放大或缩小，这是一道数学题
直接输出结论：
1、$ratio的值可以由用户随意设定
2、当设置为37.5时，表示以屏幕宽度375px为基准
3、如果屏幕宽度大于375px，使用px2rem()方法计算出的值会等比例扩大
4、如果屏幕宽度小于375px，使用px2rem()方法计算出的值会等比例缩小
举报
0/150
提交
取消
