使用rem 和 vw布局的不同

[aototo]

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

so ：1rem = 16px
设置 html { font-size: 20px } so 1rem = 20px

rem 布局

假如设计稿750，设置1rem 为 100px。

// 换算rem
let baseFontSize = 100
px2rem (num) {
 return num / 100
}

// 动态修改根类html 的 fontsize
const baseDesign = 750
changeView () {
  fontSize = window.innerWidth / 750 * baseFontSize
}

vw布局

设计稿 750 px， 1w 等于 7.5 px

const baseDesign = 750
px2vw (num) {
   return = (num / baseDesign * 100) +'vw'
}