postcss-px-to-viewport 當前版本 1.1.1
github地址
vue.config.js 配置
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport');
module.exports = {
outputDir: 'dist/demo',
css: {
loaderOptions: {
postcss: {
plugins: [
autoprefixer(),
pxtoviewport({
// 配置視窗口尺寸
viewportWidth: 750,
})
]
}
}
}
};
配置項
{
// 需要轉(zhuǎn)換的單位痹仙，默認為"px"
unitToConvert: 'px',
// 設(shè)計稿的視口寬度, 將根據(jù)視口做比例換算
viewportWidth: 750,
// 轉(zhuǎn)化精度，轉(zhuǎn)換后保留位數(shù)
unitPrecision: 2,
// 能轉(zhuǎn)化為vw的屬性列表
propList: [],
// 希望使用的視口單位
viewportUnit: 'vw',
// 字體使用的視口單位
fontViewportUnit: 'vw',
// 需要忽略的CSS選擇器
selectorBlackList: [],
// 最小的轉(zhuǎn)換數(shù)值
minPixelValue: 1,
// 媒體查詢里的單位是否需要轉(zhuǎn)換單位
mediaQuery: true,
// 轉(zhuǎn)換后是否添加備用單位
replace: true,
// 忽略文件目錄
exclude: ['node_modules'],
// 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
landscape: false,
// 橫屏時使用的單位
landscapeUnit: 'vh',
// 橫屏時使用的視口寬度
landscapeWidth: 1334
}
我的博客即將同步至騰訊云+社區(qū)缤灵，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=1bnzvlx6pay2v
