image.png
declare module 'postcss-px-to-viewport' {
type Options = {
unitToConvert: 'px' | 'rem' | 'cm' | 'em',
viewportWidth: number,
// 下面的不常用憎蛤，上面的常用
viewportHeight: number, // 目前未使用捞烟；TODO:需要不同的單位和不同屬性的數(shù)學(xué)
unitPrecision: number,
viewportUnit: string,
fontViewportUnit: string, // vmin更適合
selectorBlackList: string[],
propList: string[],
minPixelValue: number,
mediaQuery: boolean,
replace: boolean,
landscape: boolean,
landscapeUnit: string,
landscapeWidth: number
}
// 注意：這里導(dǎo)出一個函數(shù)吠卷，如果使用箭頭函數(shù)容易報錯召庞，推薦使用 function 這種寫法
export default function(options: Partial<Options>):any
}
第二步
image.png
postcss: {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px', // 需要轉(zhuǎn)換的單位岛心，默認(rèn)為"px"
viewportWidth: 750, // 設(shè)計稿的視口寬度
unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
// propList: ['*','!font-size'], // 能轉(zhuǎn)化為vw的屬性列表,!font-size表示font-size后面的單位不會被轉(zhuǎn)換
propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表,!font-size表示font-size后面的單位不會被轉(zhuǎn)換
viewportUnit: 'vw', // 希望使用的視口單位
fontViewportUnit: 'vw', // 字體使用的視口單位
// 需要忽略的CSS選擇器，不會轉(zhuǎn)為視口單位篮灼，使用原有的px等單位忘古。
// 下面配置表示類名中含有'keep-px'都不會被轉(zhuǎn)換
selectorBlackList: ['keep-px'],
minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話诅诱，只有大于1的值會被轉(zhuǎn)換
mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
replace: true, // 是否直接更換屬性值髓堪，而不添加備用屬性
exclude: [/node_modules/, /^((?!mobile).)*$/], // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
include: [], // 如果設(shè)置了include逢艘，那將只有匹配到的文件才會被轉(zhuǎn)換
landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
landscapeWidth: 1338, // 橫屏?xí)r使用的視口寬度
}
}
},
我這個項目主要是PC端，然后某一個頁面是H5骤菠，我mobile文件下是做的移動端頁面它改，需要考慮到移動端適配，然而include不生效商乎，所以在exclude里面過濾掉mobile文件夾下的文件央拖，就可以做到同一個項目，只做某個文件夾下的移動端適配，其他文件夾仍然是PC端鲜戒，不需要適配移動端
image.png
