1.vue cli3 最新插件postcss-plugin-px2rem,amfe-flexible
第一次使用的是lib-flexible+px2rem-loader(好像是这两个,具体记不清了,vue移动端适配,搜出来很多都是这个),首先遇到的问题是...忘记了........这两个插件一起使用会改变屏幕的dpr,导致使用外部插件(几乎所有第三方,不知道哪个可以)都变得很小,因为第三方使用的viewport页面缩放比都是1,而这个会根据dpr改变而改变,dpr为2,缩放为0.5,如果是750的设计稿,那你肯定首先选择75位基准( 意思是1rem=多少像素 ，这个参数值通过psd设计稿宽度/10来计算),这样设计稿是多少px,你也就直接多少px就好,px2rem会转换,但是为了兼容第三方插件,1.你需要改基准,比如为了mintui,你需要把基准设为37.5,设计稿的所有标注值/2,但是仍然会变小,尤其是dpr切换后,可能有的手机看起来还行吧,2.你选择卸载px2rem-loader,安装postcss-px2rem-exclude,设置.postcssrc.js,网上一大波如何在这个文件里设置,由于脚手架更新,这个文件会找不到.坑踩了,忘记了,时间有限就换条路
安装lib-flexible时必须要把index.html中的meta标签删掉
下面也是找来的,第三也有坑,最后结合了加上解决办法,总算正常了
正确使用postcss-plugin-px2rem,amfe-flexible
1.安装 npm install amfe-flexible -S
2.npm install postcss-plugin-px2rem -S
3.在手动建的vue.config.js中加上
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 75, // 换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
// propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
minPixelValue: 3 // 设置要替换的最小像素值(3px会被转rem)。 默认 0
})
]
}
}
}
}
4.package.json 文件中的版本号(有的时候出问题有可能版本更新不一样!)
"dependencies": {
"amfe-flexible": "^2.2.1",
"postcss-plugin-px2rem": "^0.8.1",
"vue": "^2.6.10",
},
这样第三方插件使用自如
image.png
