flexible.js和postcss-pxtorem做屏幕适配

• 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 = 16 / dpr + "px";
        } else {
            document.addEventListener("DOMContentLoaded", setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10 
    function setRemUnit() {
        // var rem = docEl.clientWidth / 10; //// 这里 10 是关键
        // docEl.style.fontSize = rem + "px";
        docEl.style.fontSize = 16 / dpr + "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);

• 安装postcss和postcss-pxtorem

npm install postcss postcss-pxtorem --save -D

• 在vue.config.js中配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [require('postcss-pxtorem')({
            rootValue: 16,
            unitPrecision: 4,
            propList: ['*'],
            mediaQuery: true,
            minPixelValue: 1,
          })],
        },
      },
    }
  },
})

• 在main.js中引入

import './flexible'

至此，flexible.js和postcss-pxtorem做屏幕适配完结，打完收工。