2回答

• 

  Sam

  2018-10-11 10:43:12

  你好，global.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()方法计算出的值会等比例缩小

  3 8

  刚仔

  老师，这个20px，是设计稿中的像素吗？还是设计稿中的像素是40px,我需要除以2，再利用这个公式自动转换？

  2019-08-04 17:16:38

  共 3 条回复 >

• 

  慕哥4533533

  2019-09-27 14:55:19

  3、如果屏幕宽度大于375px，使用px2rem()方法计算出的值会等比例扩大

  4、如果屏幕宽度小于375px，使用px2rem()方法计算出的值会等比例缩小

  对于这两点结论有个疑问，如果固定了基准为$ratio 375 实际设计稿为上述两种情况怎么做到自动缩放，不是只能按照375的设计稿缩放吗

  
  

  0 0