rem的计算原理？

Question

window.innerWidth/10是个什么原理
这样怎么跟设计图对应呢
还有那个px2rem里面的375 那万一屏幕不是375
这个不就有问题吗

以前我是这么算的
(window.innerWidth/750)*100
这样750的图上面1rem=100px，这样如果转换口算就行了

现在好像还有个这个玩意儿
https://github.com/kujian/simple-flexible/blob/master/flexible.js
也是我这种算法
为啥不用这个呢

不知道老师这么写是出于什么样的考虑

Answer 1

Sam 2019-01-19 17:26:58

你好，这里详细讲解一下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()方法计算出的值会等比例缩小

• 提问者 诺森德的凛冽寒风 #1

  你这个函数返回的值的单位是px？我还以为是rem呢

• Sam 回复 提问者 诺森德的凛冽寒风 #2

  是的，其实是将rem转化为px，而rem值又是动态计算的，从而实现自适应的

Answer 2

Sam 2019-01-19 00:10:17

如果屏幕尺寸大于375，使用这个公式会自动根据屏幕尺寸进行缩放，具体的rem原理建议看下本课程相关的免费课：https://www.imooc.com/learn/1038

• 提问者 诺森德的凛冽寒风 #1

  不是吧  你那个公式375是写死了的啊  大于375怎么会自动缩放呢

• 提问者 诺森德的凛冽寒风 #2

  ratio:375/10
  
  
  你那个scss里是这么写的吧
  
  如果屏幕大于375
  
  js算出来的1rem肯定大于37.5啊

Answer 3

Sam 2019-01-19 00:07:49

因为我们面向的场景是移动端，而375是4.7寸iPhone的屏幕宽度，所以以这个宽度的10分之1，也就是37.5px作为1rem，在移动端场景下是比较合适的，如果PC端上使用，需要设置一个上限，否则会造成字体过大的问题