请问老师这里的$ratio

Question

老师我不太明白这里的ratio变量。这个值是不会变的。为什么要定义成375/10？定义成一个固定值？

Answer 1

Sam 2019-01-24 09:48:54

你好，考虑这样一个需求：我们希望编写一个宽高都是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我们都要手动进行计算

Answer 2

提问者 hy_wang 2019-01-23 16:30:09

这个是图片

Answer 3

Sam 2019-01-22 22:41:24

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

• 提问者 hy_wang #1

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