rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。·

rem 单位基于 html 元素的字体大小。1rem等于html 的font-size

即：

html{   font-size：18px  }   
div{  width:1rem  } //div宽度为 18px
html{   font-size：75px }   
div{  width:1rem  } //div宽度为 75px  

rem适配

比如美术给的图屏幕宽度为750px;有一个方框在此图占75px
75/750=0.1
说明75px代表占屏幕宽度的10%
如果屏幕实际宽度为375px，将html的font-size赋值为375px
375*0.1rem=37.5
即：
75 / 750 = 37.5 / 375
效果图dom节点宽高 / 效果图宽度 = 实际屏幕dom节点宽高 / 实际屏幕宽度

注意： 因为html{ font-size:375px }感觉太大，所以代码中 效果图宽度 和 实际屏幕宽度 都除以了 10

//htmlWidth.js

var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
var htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = htmlWidth / 10 + 'px'

//scss方法
@function px2rem($px) {
  $point: 75px;
  @return ($px/$point) + rem;
}
div{
  width:px2rem(75px);
}

vmin适配

原理同上

vmin 是指当前较小的 vw 和 vh ，所以100vmin 时，手机横竖频都指的是手机屏幕宽度

image.png

//scss方法

@function px2vmin($px) {
  $point: 750px;
  @return ($px/$point * 100) + vmin;
}
// 75 / 750 *100 =10vmin
div{
  width:px2vmin(75px);
}