Vue2 實現自適應適配

 安裝px2rem-loader

yarn add px2rem-loader --dev

修改build/utils.js

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192//這是設計稿的尺寸1920/10
    }
}

// generateLoaders函數

const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]

引入lib-flexible.js 或者 手動設置根標簽fontSize

• main.js中引入lib-flexible

// refreshRem函數修改（修改lib-flexible原文件）
if (width / dpr > 540) {//這里有個插件設置的參數，當它大於540的時候最大用540適配，pc肯定大於540了，它就會以540去自適應，指定不行啊/所以怎么辦，搞它
          //width = 540 * dpr;
          //修改為以寬度設置，我管你多大啊，你有多大我就有多兼容
          width = width * dpr;
}

• main.js中加入下邊代碼

window.onresize = setHtmlFontSize;
function setHtmlFontSize(){
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
};
setHtmlFontSize();

 

注：

• 最后一步一定要在Vue實例之前操作

• px2rem-loader 引用了 px2rem ，配置同 px2rem（比如/*no*/會忽略px轉為rem等等）

• 在scss中/*no*/不生效，可以將px寫為PX
• px2rem-loader會將項目中所有文件中的px（符合轉換條件）轉為rem，包括node_modules中引用的第三方庫，

　　　解決方法：postcss-px2rem-exclude插件（之前寫react的時候遇到過，還請自測是否有效）

// webpack.config.js
const px2rem = require('postcss-px2rem-exclude')

// 新增下邊配置 (所有第三方庫中的px均不會被轉為rem)
px2rem({ remUnit: 75, exclude: /node_modules/i })