rem问题

Question

老师请问如果写死rem=37.5px，那么如何适配其它机型呢，rem.js也没起到作用啊？望指教

Answer 1

吕小鸣 2019-09-03 21:09:22

同学你好：

1. 首先不同机型的屏幕屏幕设置不同的根元素html的font-size，这个你应该理解。

2. 当一个元素的宽高被设置成rem(不是px)单位时，这个元素的宽高就会根据第一步设置的根元素的font-size来进行变化，这就是rem的特性。

3. 例如此时根元素html的font-size被设置成37.5px，如果这时某个元素的宽高设置成1rem，那么这个元素实际上宽高就是37.5px，因为1rem=37.5px。

4. 适配的实现就是不同的机型屏幕大小不同，那么这样就有不同的根元素html的font-size，所以元素在不同屏幕下就会展示出不同的大小。
   

• 提问者 苏菲刀客 #1

  谢谢老师我理解了！
  课程中按照iPhone6的视觉稿设计，那么根元素的font-size是37.5px，bottomBar的字体大小是11px，由此得出这个字体的rem值。
  当切换终端时就会根据这个rem值和根元素的font-size去计算相应的字体大小