Vue项目适配移动端 + 适配PC端

一、适配PC端

参考文档：https://www.cnblogs.com/wuqilang/p/13491766.html

1、 在 /src/assets 目录下新增 js 文件夹，在js文件夹中新增 flexible.js

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;
  
    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = 12 * dpr + "px";
      } else {
        document.addEventListener("DOMContentLoaded", setBodyFontSize);
      }
    }
    setBodyFontSize();
  
    // set 1rem = viewWidth / 19.2
    function setRemUnit() {
      var rem = docEl.clientWidth / 19.2;  // 这里默认是10等份，手动改为19.2，此时1rem=1920/19.2即100px。（设计稿是1920px*1080）
      docEl.style.fontSize = rem + "px";
    }
  
    setRemUnit();
  
    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function (e) {
      if (e.persisted) {
        setRemUnit();
      }
    });
  
    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement("body");
      var testElement = document.createElement("div");
      testElement.style.border = ".5px solid transparent";
      fakeBody.appendChild(testElement);
      docEl.appendChild(fakeBody);
      if (testElement.offsetHeight === 1) {
        docEl.classList.add("hairlines");
      }
      docEl.removeChild(fakeBody);
    }
  })(window, document);

2、在 /src/app.vue中引入flexible.js

<script>
import './assets/js/flexible.js'
export default {
  name: 'App'
}
</script>

3、测试代码

<template>
  <div class="hello">
    <div class="box">测试</div>
  </div>
</template>

<script>
</script>

<style scoped>
.box {
  background-color: skyblue;
  /* 1920px设计图中应该是100px */
  font-size: 1rem; 
  /* 宽度占50% */
  width: 9.6rem;
}
</style>

4、测试效果

3.1 在 1920px 的屏幕中，html根元素的font-size: 100px；1rem = 100px；宽度为9.6rem = 9.6 * 100 = 50% * 1920；

3.2 在 2560px 的屏幕中，html根元素的font-size: 133.333px； 1rem = 133.333px；宽度为9.6rem = 9.6 * 133.333 = 50% * 2560px；

二、适配移动端

参考文档：https://blog.csdn.net/viewyu12345/article/details/83153718

1、在 cmd 窗口中执行如下命令，安装依赖包

npm install lib-flexible --save

2、在 /package.json 中可以看到安装成功

3、在 /src/main.js 中引入 lib-flexible

4、来到 /node_modules/lib-flexible/flexible.js ，修改源码

修改前

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;   // 在750px的设计图中，1rem=750/10=75px
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

修改后

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 7.5;   // 在750px的设计图中，1rem=750/7.5=100px
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

5、测试代码

<template>
  <div class="hello">
    <div class="box">测试</div>
  </div>
</template>

<script>
</script>

<style scoped>
.box {
  background-color: skyblue;
  /* 在750px的设计图中字体大小是100px；因为是两倍图的关系，对应到iPhone 6/7/8中字体大小是50px； */
  font-size: 1rem;
  /* 宽度占50% */
  width: 3.75rem;
}
</style>

6、测试效果（以750px的设计图为准，注意这是两倍图，满屏750px=7.5rem）

6.1 在iPhone 6/7/8中，html根元素的font-size: 50px；即1rem = 50px=375 / 7.5；宽度为3.75rem = 3.75 * 50 = 50% * 375；

6.2 在iPhone 5/SE中，html根元素的font-size: 42.6667px；即1rem = 42.6667px=320 / 7.5；宽度为3.75rem = 3.75 * 42.6667 = 50% * 320；

6.3 在360px的屏幕中，html根元素的font-size: 48px；即1rem = 48px=360 / 7.5；宽度为3.75rem = 3.75 * 48 = 50% * 360；