remUnit的疑问
之前在rem.js中已经设定了html字体大小为100px，也就是1rem=100px
平时写样式时，20px=0.2rem，浏览器解析出来也是20px，很方便
但我不明白，把remUnit设为50，或是其它数值的作用是什么？
当设为50的时候，20px=0.4rem，由于根元素（也就是html）的字体大小是100px，浏览器解析出来就会是40px，这就跟预期的20px不相等
请老师讲下remUnit不设为100，设为其它数值的意义何在？
正在回答
同学你好，如果设计稿是640px，计算起来的确有点麻烦，需要将remUnit设置成640/750*100=85.33。px2rem-loader这个插件，主要是帮助我们计算，如果设计稿是640px，而rem.js会将html的字体大小设置成85.33px，假设设计稿上元素是100px宽，如果我们自己计算，公式是这样的：100/85.33；而这个过程可以使用px2rem-loader来完成，即将remUnit设置成85.33，那么插件就会自动将100px，按照100/85.33这个公式转成rem。
祝学习愉快！
同学你好，问题解答如下：
1、rem.js中的代码，会按照页面的宽度来设置html的字体大小，当页面宽度是750px时，html的字体大小就是100px：
设置成100就是为了方便计算。
2、由于我们当前的项目，设计稿是375px（不是750px），所以rem.js计算出来的html的字体大小就是50px（不是100），因此remUnit设置成了50px（二者保持一致）。此时375的设计稿上如果元素是20px，那么根据remUnit计算出来的rem值是0.4，而此时html的字体大小也是50px，所以元素在页面上也是20px，与设计稿是一样的。即，将remUnit设置成50px，就是为了与rem.js计算出来的html的字体大小保持一致。
3、同学所说的两种情况，比较的不对。正确应该是如下形式:
如果元素在750px的设计稿上是20px，那么换算成375px的设计稿，就应该是10px（等比缩小）。在750px上，元素是0.2rem（html是100px）；在375px上，由于remUnit是50，根据它计算得到元素是0.2rem，而此时rem.js会将html的字体大小设置成50px，所以元素的实际尺寸是10px，与设计稿一致，但是是750px的一半，这样才是正确的。
同学再理解一下。
祝学习愉快!
- 参与学习 人
- 提交作业 209 份
- 解答问题 3299 个
本路径是通过ES6基础知识、运用Zepto、Swiper、fullPag等移动端常用工具包、以及当下流行框架Vue，结合多个实战案例，还原真实开发场景，最终实现手机端购物商城网页开发。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧