“postcss-px-to-viewport”插件可作为前端适配方案之一。
前言
之前做前端适配,要么通过使用css的media媒体查询,要么通过获取可视宽度按照想要的比例设置文档根字体大小。无意间在网上看到一种新的适配插件--postcss-px-to-viewport,就是用viewport(vw)单位,viewport单位越来越受到众多浏览器的支持,postcss-px-to-viewport,将px单位按照相应的配置自动转换成需要的viewport单位,具体用法可参考该postcss-px-to-viewport 文档。
安装
可使用npm、yarn安装:
npm install -D postcss-px-to-viewport
或 yarn add -D postcss-px-to-viewport
使用
在项目的最外层(即配置文件同级目录下)新建.postcssrc.js文件,在.postcssrc.js文件中加入配置语句,.postcssrc.js更新需要重启才会生效,以下为示例:
module.exports = {
plugins: {
autoprefixer: {}, // 自动添加相应浏览器前缀,样式兼容,如-webkit-,-moz-等
"postcss-px-to-viewport": {
unitToConvert: "px", // (String)需要转换的单位,默认为"px"
viewportWidth: 750, // (Number)设计稿的视口宽度:可为设计稿的宽度,也可按需自行配置(PC)
unitPrecision: 6, // (Number)单位转换后保留的精度,即小数点位数
propList: ["*"], // (Array)指定转换的css属性的单位,*代表全部css属性的单位都进行转换
viewportUnit: "vw", // (String)指定需要转换成的视窗单位,默认vw
fontViewportUnit: "vw", // (String)指定字体需要转换成的视窗单位,默认vw
selectorBlackList: ["demo"], // (Array)需要忽略的CSS选择器,不转为视窗单位,使用原有单位,
minPixelValue: 1, // (Number)设置最小的转换数值,默认为1,只有大于1的值会被转换
mediaQuery: true, // (Boolean)媒体查询里的单位是否需要转换单位,默认false
replace: true, // (Boolean)是否直接更换属性值,而不添加备用属性
exclude: [/node_modules/], // (Array or Regexp)忽略某些文件夹下的文件或特定文件,用正则做目录名匹配
include: /Ignore.vue/, //(Array or Regexp)只有匹配到的文件才会被转换,那将只有匹配到的文件才会被转换
landscape: false, // (Boolean)是否添加根据 landscapeWidth 生成的媒体查询条件
landscapeUnit: 'vw', //(String)横屏时使用的单位
landscapeWidth: 700 //(Number)横屏时使用的视口宽度
}
}
};
也可在配置文件中进行配置
vue.config.js
const pxtoviewport = require("postcss-px-to-viewport");
module.exports = {
css: {
// 忽略 CSS order 顺序警告
extract: { ignoreOrder: true },
// 适配插件
loaderOptions: {
postcss: {
plugins: [
pxtoviewport({
// 配置视窗口尺寸
viewportWidth: 1700,
unitPrecision: 5,
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
}),
],
},
},
},
}
注意
使用“postcss-px-to-viewport”插件时,对内联css样式,外联css样式有效,对行内css样式和JavaScript动态设置的样式无效。