3回答

Sam

2019-01-24

你好，考虑这样一个需求：我们希望编写一个宽高都是100px的div（div的class为box），css应该这么写：

<style>
  .box {
    width: 100px;
    height: 100px;
  }
</style>

现在我们对需求进行增强：div的宽高100px是针对屏幕宽度为375px的浏览器，如果屏幕变成414px时，我们希望宽高能够同比例放大，这时就需要借助rem来实现。1rem=html的font-size属性，我们可以动态计算这个值，假设屏幕宽度为414px，那么我们就设置html的font-size=41.4px，那么这时1rem=41.4px，但是由于我们是以375px屏幕作为基准的，所以基准值为37.5px，此时再进行计算：

100px = 100 / 37.5 rem = 2.667rem = 110.4px

所以100px到414px的屏幕上就变成了110.4px，从而实现了自适应布局。编写px2rem这个方法是为了简化rem的计算流程，不然每一个px我们都要手动进行计算

1

0

hy_wang

提问者

2019-01-23

这个是图片

0

0

Sam

2019-01-22

你好，我在另外一个帖子中详细讲解了rem的原理，和计算公式的解析，你可以参考一下，和你提出的问题是类似的：http://coding.imooc.com/learn/questiondetail/98304.html

0

1

hy_wang

老师我不太明白 明明返回 @return $px / $ratio + rem; 为什么你的计算是* 乘？ 况且如果是+那么应该是字符串的拼接吧。单位怎么能是px，不应该是rem吗

2019-01-23

共1条回复