新建兩個(gè)css空文件

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

reset.scss的內(nèi)容在

https://meyerweb.com/eric/tools/css/reset/index.html
移動(dòng)端適配加上:

html, body{
  height: 100%;
  width: 100%;
  user-select: none;  //默認(rèn)設(shè)置不允許長(zhǎng)按選中文字
  overflow: hidden;
}

global.scss的內(nèi)容如下

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

app.vue的script內(nèi)容如下

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

使用:

頁(yè)面內(nèi)

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