最近在项目中使用postcss-px-to-viewport
插件做页面的时候发现了一个bug,虽然插件会把px
转成视口单位vw
实现页面的适应,但是因为同一设备下视口宽度
是固定的,所以页面放大缩小不会改变元素的大小。可以将postcss-px-to-viewport
设置为将px
转成rem
单位实现页面适配,同时也不影响页面的放大缩小。
postcss: {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 1920 /** 设计稿的视口宽度 */,
unitToConvert: 'px' /** 需要转换的单位,默认为"px" */,
unitPrecision: 5 /** 单位转换后保留的精度 */,
propList: ['*'] /** 能转化为vw的属性列表 */,
// viewportUnit: 'vw' /** 希望使用的视口单位 */,
viewportUnit: 'rem' /** 希望使用的视口单位,改为使用rem */,
// fontViewportUnit: 'vw' /** 字体使用的视口单位 */,
fontViewportUnit: 'rem' /** 字体使用的视口单位,改为使用rem */,
selectorBlackList: [] /** 需要忽略的CSS选择器 */,
minPixelValue: 1 /** 设置最小的转换数值 */,
mediaQuery: false /** 媒体查询里的单位是否需要转换单位 */,
replace: true /** 是否直接更换属性值,而不添加备用属性 */,
exclude: undefined /** 忽略某些文件夹下的文件或特定文件 */,
include: undefined /** 设置将只有匹配到的文件才会被转换 */,
landscape: false /** 是否添加根据 landscapeWidth 生成的媒体查询条件 @media */,
// landscapeUnit: 'vw' /** 横屏时使用的单位 */,
landscapeUnit: 'rem' /** 横屏时使用的单位,改为使用rem */,
landscapeWidth: undefined /** 横屏时使用的视口宽度 */
}
}
},