新建两个css空文件

分别是reset.scss和global.scss
放在assets下

reset.scss的内容在

https://meyerweb.com/eric/tools/css/reset/index.html
移动端适配加上:

html, body{
  height: 100%;
  width: 100%;
  user-select: none;  //默认设置不允许长按选中文字
  overflow: hidden;
}

global.scss的内容如下

@import "./reset.scss";
$ratio : 375 / 10;
@function px2rem($px){
  @return $px / $ratio + rem
}

app.vue的script内容如下

<script>
  export default {}
  document.addEventListener('DOMContentLoaded', () => {
    const html = document.querySelector('html')
    let fontSize = window.innerWidth / 10
    if (fontSize > 50) fontSize = 50
    html.style.fontSize = fontSize + 'px'
  })
</script>

使用:

页面内

<style lang="scss" scoped>
  @import "~@/assets/global.scss";
  .test {
    font-size: px2rem(30);
  }
</style>