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,
})
]
}
}
}
};
配置项
{
// 需要转换的单位，默认为"px"
unitToConvert: 'px',
// 设计稿的视口宽度, 将根据视口做比例换算
viewportWidth: 750,
// 转化精度，转换后保留位数
unitPrecision: 2,
// 能转化为vw的属性列表
propList: [],
// 希望使用的视口单位
viewportUnit: 'vw',
// 字体使用的视口单位
fontViewportUnit: 'vw',
// 需要忽略的CSS选择器
selectorBlackList: [],
// 最小的转换数值
minPixelValue: 1,
// 媒体查询里的单位是否需要转换单位
mediaQuery: true,
// 转换后是否添加备用单位
replace: true,
// 忽略文件目录
exclude: ['node_modules'],
// 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscape: false,
// 横屏时使用的单位
landscapeUnit: 'vh',
// 横屏时使用的视口宽度
landscapeWidth: 1334
}
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1bnzvlx6pay2v
