rem 移动端响应式

一、 在vue-cli中：

1. 在index.html中：

<script>
    //监听自动刷新旋转屏幕改变
    window.addEventListener('onorientationchange', setRem);
    //监听自动刷新大小
    window.addEventListener('resize', setRem);
    setRem()    //  调用
    function setRem() {
      //获取HTML元素
      let html = document.querySelector('html')
      //获取可视区宽
      let width = html.getBoundingClientRect().width;
      //设置比例 1rem = width / 16
      html.style.fontSize = width / 16 + 'px'
</script>

2. 在common.scss中：

@function rem($px){
  @return $px / 46.875 + rem
}

3. 将common.scss引入app.vue中文件中

<style lang="scss">
@import './components/css/common.scss';
</style>

4. 在scss中：

div{
  font-size:rem(25);
}

二、不在vue中的用法：

1. 新建rem.js文件

<script>
    //监听自动刷新旋转屏幕改变
    window.addEventListener('onorientationchange', setRem);
    //监听自动刷新大小
    window.addEventListener('resize', setRem);
    setRem()    //  调用
    function setRem() {
      //获取HTML元素
      let html = document.querySelector('html')
      //获取可视区宽
      let width = html.getBoundingClientRect().width;
      //设置比例 1rem = width / 16
      html.style.fontSize = width / 16 + 'px'
</script>

2. 将rem.js引到每个html中

<script src="../js/rem.js"></script>

3. 在common.css中：

@function rem($px){
  @return $px / 46.875 + rem
}

4. 将common.css引入每个html中

 <link rel="stylesheet" href="../css/common.css">

（建议参考：https://www.jianshu.com/p/57fff7e5bd13）

5. 在css（scss）中：

div{
  font-size:rem(25);
}