vue移動端、PC自适應（配置postcss-px2rem）

現在配置postcss-px2rem移動端适配的方法大緻有幾種：

不管用那種方法配置，首先拉取依賴

npm i lib-flexible postcss-px2rem

，或者

npm i lib-flexible postcss-pxtorem

，兩種配置的依賴是不一樣的，要注意。這裡沒加

--save

是因為npm拉包預設就給你加到運作依賴裡去了，拉開發依賴包時再加上

--D

然後以下配置方法任選一種使用
           

1.在postcss.config.js中配置（postcss-pxtorem）

module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
};
           

2.在vue.config.js中配置（postcss-px2rem）

module.exports={
	css: {
	        loaderOptions: {
	            css: {},
	            postcss: {
	                plugins: [
	                    require('postcss-px2rem')({
	                    	 //lib-flexible 将螢幕分成10份(10rem)，這裡設定表示設計圖寬度為10*37.5=375px
           					 // 配置成 37.5 是為了相容 沒有适配 rem 布局的第三方 ui 庫
	                        remUnit: 37.5
	                    })
	                ]
	            }
	        }
	    },
}
           

3.其它

配置完成後注意删除掉index.html裡的視窗meta标簽 <meta name='viewport'> 以便讓插件幫你生成。
           

最後在main.js裡引入lib-flexible

import 'lib-flexible'

npm run serve看看吧，原來用px寫的css，插件已經幫我們轉成rem了，不過注意兩種配置的依賴postcss-pxtorem和postcss-px2rem有差别哦。

如果在适配時需要排除一些UI元件庫的話可以這麼做：

先拉取

postcss-px2rem-exclude

依賴包

無需上面的配置了，直接在postcss.config.js裡作這一個配置即可

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
            "remUnit": 75,
            "exclude": /node_modules/i
        }
    }
}
           

這個配置設定螢幕寬度為10rem*75px=750px，原來的box的width='375px’被轉換為5rem，并排除了/node_modules下的内容，使UI元件大小不變。

适配PC端也很簡單

找到lib-flexible包，注釋掉如下的判斷條件代碼，讓其在寬度大于540像素也适用。

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
           

不想被轉換成rem，将px大寫即可

.box{
	width:200PX;
	height:200PX;
}