轉(zhuǎn)自：https://www.cnblogs.com/zhangnan35/p/12682925.html
第一種方案是lib-flexible+postcss-pxtorem，在相當(dāng)長(zhǎng)一段時(shí)間里梁钾，這兩個(gè)插件搭配都是解決移動(dòng)端布局的神器溃槐，lib-flexible是阿里手淘系開源的一個(gè)庫(kù)舌缤，用于設(shè)置font-size楣责，同時(shí)處理一些窗口縮放的問(wèn)題。其中一位主要貢獻(xiàn)者正是阿里的大神winter。
直到2020年的今天穿扳，我仍然可以說(shuō)，lib-flexible+postcss-pxtorem是解決移動(dòng)端布局的主流国旷，但是我們可以好好想一想矛物，它是否有什么不足？
從我個(gè)人來(lái)說(shuō)跪但，我認(rèn)為它主要有以下兩個(gè)不足：
1.兩個(gè)插件需要配套使用履羞，而且rootValue設(shè)置的值不好理解
2.rem是相對(duì)于html元素字體單位的一個(gè)相對(duì)單位，從本質(zhì)上來(lái)說(shuō)屡久，它屬于一個(gè)字體單位忆首，用字體單位來(lái)布局，并不是太合適
第二種方案是viewport被环，postcss-px-to-viewport就是這樣一款優(yōu)秀的插件糙及，它解決了以上提到的痛點(diǎn)，也滿足以上提到的理想要求筛欢。它將px轉(zhuǎn)換成視口單位vw浸锨，眾所周知唇聘，vw本質(zhì)上還是一種百分比單位，100vw即等于100%柱搜，即window.innerWidth
1迟郎。我們先把它安裝到項(xiàng)目的開發(fā)環(huán)境中：
npm i postcss-px-to-viewport -D
yarn add postcss-px-to-viewport -D
2.在項(xiàng)目根目錄下添加.postcssrc.js文件,寫入下面的代碼
3.適配UI框架和H5頁(yè)面
vant團(tuán)隊(duì)的是根據(jù)375px的設(shè)計(jì)稿去做的，理想視口寬度為375px聪蘸。
那么宪肖，我們是否也要叫UI重新出一版375px的設(shè)計(jì)稿？
或者宇姚，我們?cè)跁鴮懙倪^(guò)程心算一下匈庭，所有標(biāo)注的尺寸都除以2？
讓我們回到webpack本身浑劳，重新看一下這份.postcssrc.js文件阱持，它除了暴露一個(gè)對(duì)象，也可以暴露一個(gè)函數(shù)魔熏，無(wú)論暴露什么衷咽，在webpack運(yùn)行時(shí)，都會(huì)被我們配置的海量文件讀取并執(zhí)行蒜绽。
暴露函數(shù)有一個(gè)好處镶骗，可以拿到webpack運(yùn)行的當(dāng)前執(zhí)行文件的信息。
那么我們可以有這樣一個(gè)思路：如果讀取的是vant相關(guān)的文件躲雅，viewportWidth就設(shè)為375鼎姊，如果是其他的文件，我們就按照我們UI的寬度來(lái)設(shè)置viewportWidth相赁，即750相寇。
改寫.postcssrc.js文件配置如下：
const path = require('path');
module.exports = ({ file }) => {
const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
return {
plugins: {
autoprefixer: {},
"postcss-px-to-viewport": {
unitToConvert: "px",
viewportWidth: designWidth,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
exclude: [],
landscape: false
}
}
}
}
注意：這里使用path.join('node_modules', 'vant')是因?yàn)檫m應(yīng)不同的操作系統(tǒng)，在mac下結(jié)果為node_modules/vant钮科，而在windows下結(jié)果為node_modules\vant
//需要注意的
1.propList: 當(dāng)有些屬性的單位我們不希望轉(zhuǎn)換的時(shí)候唤衫，可以添加在數(shù)組后面，并在前面加上!號(hào)绵脯，如propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進(jìn)行轉(zhuǎn)化佳励，除了letter-spacing的
2.selectorBlackList：轉(zhuǎn)換的黑名單，在黑名單里面的我們可以寫入字符串蛆挫，只要類名包含有這個(gè)字符串赃承，就不會(huì)被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類名的單位璃吧，都不會(huì)被轉(zhuǎn)換
