rem的计算原理？
来源：3-5 viewport配置和rem设置
诺森德的凛冽寒风
2019-01-18
window.innerWidth/10是个什么原理
这样怎么跟设计图对应呢
还有那个px2rem里面的375 那万一屏幕不是375
这个不就有问题吗
以前我是这么算的
(window.innerWidth/750)*100
这样750的图上面1rem=100px，这样如果转换口算就行了
现在好像还有个这个玩意儿
https://github.com/kujian/simple-flexible/blob/master/flexible.js
也是我这种算法
为啥不用这个呢
不知道老师这么写是出于什么样的考虑
3回答
-
你好，这里详细讲解一下rem的原理，mixin.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()方法计算出的值会等比例缩小
022019-01-19 -
Sam
2019-01-19
如果屏幕尺寸大于375，使用这个公式会自动根据屏幕尺寸进行缩放，具体的rem原理建议看下本课程相关的免费课：https://www.imooc.com/learn/1038
022019-01-19 -
Sam
2019-01-19
因为我们面向的场景是移动端，而375是4.7寸iPhone的屏幕宽度，所以以这个宽度的10分之1，也就是37.5px作为1rem，在移动端场景下是比较合适的，如果PC端上使用，需要设置一个上限，否则会造成字体过大的问题
00
相似问题