移動端vue 的項目適配一直是個問題,這里記錄下實現
推薦用 postcss-px-to-viewport 插件去處理,轉換成vw 單位
postcss-px-to-viewport是一款非常好用的插件，
它將px轉換成視口單位vw，大家都知道，vw本質上還是一種百分比單位，100vw即等於100%，即window.innerWidth 獲取
用默認即可,可以不用設置修改
本案例是在cli3中實施的,其他的照舊應該也一樣
在vue項目中引入
1.我們先把它安裝到項目的開發環境：
npm i postcss-px-to-viewport -D
1.
2.在項目根目錄下新建.postcssrc.js文件
3.添加下面配置：
module.exports = {undefined
plugins: {undefined
autoprefixer: {}, // 用來給不同的瀏覽器自動添加相應前綴，如-webkit-，-moz-等等
"postcss-px-to-viewport": {undefined
unitToConvert: "px", // 要轉化的單位
viewportWidth: 750, // UI設計稿的寬度
unitPrecision: 6, // 轉換后的精度，即小數點位數
propList: [""], // 指定轉換的css屬性的單位，代表全部css屬性的單位都進行轉換
viewportUnit: "vw", // 指定需要轉換成的視窗單位，默認vw
fontViewportUnit: "vw", // 指定字體需要轉換成的視窗單位，默認vw
selectorBlackList: ["wrap"], // 指定不轉換為視窗單位的類名，
minPixelValue: 1, // 默認值1，小於或等於1px則不進行轉換
mediaQuery: true, // 是否在媒體查詢的css代碼中也進行轉換，默認false
replace: true, // 是否轉換后直接更換屬性值
exclude: [/node_modules/], // 設置忽略文件，用正則做目錄名匹配
landscape: false // 是否處理橫屏情況
}
}
};
4.重新運行項目，配置文件生效
5.寫一段測試代碼來驗證一下：
6.打開控制台，可以看到已經進行了轉換
要注意的配置
propList: 當有些屬性的單位我們不希望轉換的時候，可以添加在數組后面，並在前面加上!號，
如propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進行轉化，
除了letter-spacing的
selectorBlackList：轉換的黑名單，
在黑名單里面的我們可以寫入字符串，只要類名包含有這個字符串，
就不會被匹配。
比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類名的單位，
都不會被轉換
兼容第三方UI庫
當我們引入一些第三方庫的時候，比如vant，上面配置的exclude去掉，表示全部內容進行vw轉換，會遇到這樣的問題：
像這個TabBar，變得非常的小，被壓扁了。
其實vant官網也是給出了關於viewport的適配方案，在github找一個名為vant-demo的項目，可以看到其配置如下：
vant團隊的是根據375px的設計稿去做的，理想視口寬度為375px。
那么，我們是否也要叫UI重新出一版375px的設計稿？
或者，我們在書寫的過程心算一下，所有標注的尺寸都除以2？
讓我們回到webpack本身，重新看一下這份.postcssrc.js文件，它除了暴露一個對象，也可以暴露一個函數，無論暴露什么，在webpack運行時，都會被我們配置的海量文件讀取並執行。
暴露函數有一個好處，可以拿到webpack運行的當前執行文件的信息。前端培訓
那么我們可以有這樣一個思路：如果讀取的是vant相關的文件，viewportWidth就設為375，如果是其他的文件，我們就按照我們UI的寬度來設置viewportWidth，即750。
改寫.postcssrc.js文件配置如下：
const path = require('path');
module.exports = ({ file }) => {undefined
const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
return {undefined
plugins: {undefined
autoprefixer: {},
"postcss-px-to-viewport": {undefined
unitToConvert: "px",
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
注意：這里使用path.join('node_modules', 'vant')是因為適應不同的操作系統，在mac下結果為node_modules/vant，而在windows下結果為node_modules\vant
重新運行后發現，不僅vant相關組件的單位被轉換成了vw，而且其比例也是完全正確的了。
以上部分屬於互聯網收集實際整合
