这篇文章主要介绍“vue自适应布局postcss-px2rem实例分析”，在日常操作中，相信很多人在vue自适应布局postcss-px2rem实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue自适应布局postcss-px2rem实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
首先，我们来了解一下lib-flexible和amfe-flexible:
lib-flexible是淘宝项目组开发出来的一个开源插件，会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。而amfe-flexible是lib-flexible的升级版，所以现在我就只使用amfe-flexible了。
与其搭配的postcss-px2rem(pxtorem）作用为把px转变为rem
1.下载amfe-flexible： cnpm install postcss-px2rem -S
2.下载postcss-px2rem： cnpm install postcss-px2rem -S
小tip:使用yarn下载不了
未免兼容麻烦，我这里指定了版本
3.在main.js里引入amfe-felxible
计算
安全
数据库
网络和加速
企业服务
import 'amfe-flexible'3.在vue.config.js文件里面配置postcss
我下载的vue-cli3,配置如下
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
}
}vue-cli2配置则为
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": { // 此处为添加部分
rootValue: 100, // 换算基数，默认100，把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少px
unitPrecision: 5, //保留rem小数点多少位
propList: ['*', '!border', '!font-size'], // 存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法。
replace: true,
mediaQuery: false,//（布尔值）媒体查询( @media screen 之类的)中不生效
minPixelValue: 12,///设置要替换的最小像素值，px小于12的不会被转换
//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性
propBlackList: ['font-size'], //黑名单
}
}
}到此，关于“vue自适应布局postcss-px2rem实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
