rem是什么？

rem（font size of the root element）是指相對于根元素的字體大小的單位。簡單的說它就是一個相對單位?？吹絩em大家一定會想起em單位，em（font size of the element）是指相對于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過一個計(jì)算的規(guī)則是依賴根元素一個是依賴父元素計(jì)算。·

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適配

比如美術(shù)給的圖屏幕寬度為750px;有一個方框在此圖占75px
75/750=0.1
說明75px代表占屏幕寬度的10%
如果屏幕實(shí)際寬度為375px，將html的font-size賦值為375px
375*0.1rem=37.5
即：
75 / 750 = 37.5 / 375
效果圖dom節(jié)點(diǎn)寬高 / 效果圖寬度 = 實(shí)際屏幕dom節(jié)點(diǎn)寬高 / 實(shí)際屏幕寬度

注意： 因?yàn)閔tml{ font-size:375px }感覺太大，所以代碼中 效果圖寬度 和 實(shí)際屏幕寬度 都除以了 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 是指當(dāng)前較小的 vw 和 vh ，所以100vmin 時，手機(jī)橫豎頻都指的是手機(jī)屏幕寬度

image.png

//scss方法

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