Vue3大屏+移动端适配

使用插件

autoprefixer+postcss-pxtorem

autoprefixer原理是在index.html动态追加标签<meta  name="viewport" content="width=device-width, initial-scale=1.0">已经更新根标签字体大小，

当我们使用rem为盒子定义尺寸时，盒子就会随着根标签的变化产生对应的换算，vscode可以使用编辑器里面的cssrem来实现rem换算

也可以通过使用pxtorem来对项目px单位进行转换

根据autoprefixer里的一段源代码我们可以发现插件是根据页面宽的十分之一来进行单位转换的，即根的font-size为页面的十分之一

// set 1rem = viewWidth / 10
function setRemUnit () {
  var rem = docEl.clientWidth / 10
  docEl.style.fontSize = rem + 'px'
  console.log(docEl.clientWidth+'页面大小')
  console.log(rem+'实际大小')
}

而插件同样监听了BOM的resize，pageshow事件，方便动态的更新页面根标签fontsize