postcss-px-to-viewport (推荐使用这个方案)
他是这样一款优秀、高效、简洁的解决方案,它能完美解决上面的三个痛点,高效的将代码中px单位转为rm、rem、vw等视口单位,一份配置文件完美解决适配问题。
npm 安装
npm install postcss-px-to-viewport --save-dev
项目根目录添加配置文件
- 在根目录里创建
postcss.config.js
配置文件 - 添加配置
module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: 'px', // 需要转换的单位,默认为"px" viewportWidth: 1920, // 设计稿的视口宽度 unitPrecision: 5, // 单位转换后保留的精度 propList: ['*'], // 能转化为vw的属性列表 viewportUnit: 'vw', // 希望使用的视口单位 fontViewportUnit: 'vw', // 字体使用的视口单位 selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。 minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换 mediaQuery: false, // 媒体查询里的单位是否需要转换单位 replace: true, // 是否直接更换属性值,而不添加备用属性 exclude: undefined, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件 include: undefined, // 如果设置了include,那将只有匹配到的文件才会被转换 landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) landscapeUnit: 'vw', // 横屏时使用的单位 landscapeWidth: 1920 // 横屏时使用的视口宽度 } } }
- 重启项目就可以看到配置成功
lib-flexible + postcss-pxtorem
lib-flexible:相当于这个插件是控制 1 rem 具体的大小根据屏幕分辨率自动跳转
postcss-pxtorem:这个插件是控制px转换到rem的值
安装
npm install lib-flexible --save-dev
npm install postcss-pxtorem -D
使用(vue模板案例 设计图为750px)
- 在 main.js 中引入 lib-flexible
import 'lib-flexible';
- webpack编译配置
//vue.config.js module.exports = { lintOnSave: true, css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ //这个值的作用是把页面写的px转为多少rem,比如页面写的是200px,那么转换成的rem值就是 200 / 这个值 // 这个值得到75的原因是因为,lib-flexible默认设置根节点字体大小为屏幕分辨率 / 10,而这个地方rootValue的缩放比例必须跟控制根节点字体大小的缩小比例相同,所以这个地方默认就是缩小10倍 rootValue : 75, propList : ['*'], }), ] } } }, }