在vue項(xiàng)目中引入試試（更新于2021年9月27日）
- 創(chuàng)建一個(gè)vue項(xiàng)目并安裝該插件
vue create mobile-px-demo
cd mobile-px-demo && yarn add postcss-px-to-viewport -D
以下是我的創(chuàng)建配置谭网，本機(jī)node版本為v14.16.1：
[圖片上傳失敗...(image-43729b-1677556507802)]
image.png
- 在項(xiàng)目根目錄下添加
.postcssrc.js文件 - 添加如下配置：
module.exports = {
plugins: {
autoprefixer: {}, // 用來(lái)給不同的瀏覽器自動(dòng)添加相應(yīng)前綴，如-webkit-坝撑，-moz-等等
"postcss-px-to-viewport": {
unitToConvert: "px", // 要轉(zhuǎn)化的單位
viewportWidth: 750, // UI設(shè)計(jì)稿的寬度
unitPrecision: 6, // 轉(zhuǎn)換后的精度静秆，即小數(shù)點(diǎn)位數(shù)
propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位巡李，默認(rèn)vw
fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位抚笔，默認(rèn)vw
selectorBlackList: ["wrap"], // 指定不轉(zhuǎn)換為視窗單位的類(lèi)名，
minPixelValue: 1, // 默認(rèn)值1侨拦，小于或等于1px則不進(jìn)行轉(zhuǎn)換
mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換殊橙，默認(rèn)false
replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
exclude: [/node_modules/], // 設(shè)置忽略文件，用正則做目錄名匹配
landscape: false // 是否處理橫屏情況
}
}
};
- 重新運(yùn)行項(xiàng)目狱从，使配置文件生效
- 我們寫(xiě)一段測(cè)試代碼來(lái)驗(yàn)證一下：
<template>
<div class="test-viewport">測(cè)試轉(zhuǎn)換</div>
</template>
<style lang="less" scoped>
.test-viewport {
width: 750px;
height: 100px;
font-size: 40px;
text-align: center;
line-height: 100px;
background: #13b5b1;
}
</style>
- 打開(kāi)控制臺(tái)膨蛮，可以看到已經(jīng)進(jìn)行了轉(zhuǎn)換
[圖片上傳失敗...(image-c5c955-1677556507802)]
image.png
需要注意的配置
-
propList: 當(dāng)有些屬性的單位我們不希望轉(zhuǎn)換的時(shí)候，可以添加在數(shù)組后面季研，并在前面加上!號(hào)敞葛，如propList: ["*","!letter-spacing"],這表示：所有css屬性的屬性的單位都進(jìn)行轉(zhuǎn)化，除了letter-spacing的 -
selectorBlackList：轉(zhuǎn)換的黑名單与涡，在黑名單里面的我們可以寫(xiě)入字符串惹谐，只要類(lèi)名包含有這個(gè)字符串，就不會(huì)被匹配驼卖。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper這樣的類(lèi)名的單位氨肌，都不會(huì)被轉(zhuǎn)換
關(guān)于兼容第三方UI庫(kù)
當(dāng)然，當(dāng)我們引入一些第三方庫(kù)的時(shí)候酌畜，比如vant怎囚，上面配置的exclude去掉，表示全部?jī)?nèi)容進(jìn)行vw轉(zhuǎn)換桥胞，會(huì)遇到這樣的問(wèn)題：
[圖片上傳失敗...(image-435057-1677556560749)]
像這個(gè)TabBar桩了，變得非常的小，被壓扁了埠戳。
其實(shí)vant官網(wǎng)也是給出了關(guān)于viewport的適配方案井誉，在github找一個(gè)名為vant-demo的項(xiàng)目，可以看到其配置如下整胃，github鏈接：
[圖片上傳失敗...(image-617ceb-1677556560749)]
很尷尬颗圣，vant團(tuán)隊(duì)的是根據(jù)375px的設(shè)計(jì)稿去做的，理想視口寬度為375px屁使。
那么在岂，我們是否也要叫UI重新出一版375px的設(shè)計(jì)稿？
或者蛮寂，我們?cè)跁?shū)寫(xiě)的過(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春寿。
改寫(xiě).postcssrc.js文件配置如下：
const path = require('path');
module.exports = ({ webpack }) => {
const designWidth = webpack.resourcePath.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
另外堂淡，收到有同學(xué)反饋關(guān)于Cannot read property 'dirname' of undefined的問(wèn)題，我本地由于是macOS系統(tǒng)扒腕，多次嘗試無(wú)法復(fù)現(xiàn)該問(wèn)題绢淀，猜測(cè)有可能是平臺(tái)問(wèn)題或打包工具問(wèn)題，換成了取用編譯的webpack對(duì)象中的resourcePath瘾腰。
重新運(yùn)行后發(fā)現(xiàn)皆的，不僅vant相關(guān)組件的單位被轉(zhuǎn)換成了vw，而且其比例也是完全正確的蹋盆。
[圖片上傳失敗...(image-883e12-1677556560749)]
github地址如下费薄，可以下載到本地運(yùn)行：
轉(zhuǎn)載：https://www.cnblogs.com/zhangnan35/p/12682925.html
