本文主要介绍vue自适应布局(postcss-px2rem)的相关知识。这篇文章给大家讲的很详细，对大家的学习或者工作都有一定的参考价值。请有需要的朋友参考。

首先，让我们看看lib-flexible和amfe-flexible:

Lib-flexible是淘宝项目组开发的开源插件。它会自动在html的头部添加一个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 post CSS-px 2 rem-s

2.下载PostCSS-PX2REM: CNPM安装PostCSS-PX2REM-S

小tip:使用yarn下载不了

兼容太麻烦了。我在这里指定了版本。

3.将amfe-felxible引入main.js

导入' amfe-灵活'

3.在vue.config.js文件中配置postcss

我下载了vue-cli3，配置如下

模块.导出={

css: {

loaderOptions: {

css: {}，

postcss: {

插件：[

require('postcss-px2rem')({

剩余单位：37.5

})

]

}

}

}

}

vue-cli2配置为

模块.导出={

插件':{

postcss-import': {}，

postcss-url': {}，

//编辑目标浏览器：使用package.json中的“browserslist”字段

自动前缀“:{}，

Postcss-pxtorem': {//下面是添加的部分

RootValue: 100，//转换基数默认为100，根标签的字体大小设置为1rem和50px，多少px在设计稿中测量，直接写在代码中。

UnitPrecision: 5，rem保留多少位小数？

propList: ['* '！边框'，'！Font-size']，//存储要转换的属性列表，'！“字体大小”,即不对字体进行rem转换。

选择器黑名单：['。radius']，//要被忽略并为px保留的选择器，如fs-xl类名。里面px的风格不会转换，支持常规书写。

替换：真，

MediaQuery: false，//(布尔值)在媒体查询(@media screen等)中无效

PixelValue: 12，///设置要替换的最小像素值，px小于12的不转换。

//propWhiteList: []，//默认值为空数组，表示禁用白名单，启用所有属性。

PropBlackList: ['font-size']，//黑名单

}

}

}

参考：

https://blog.csdn.net/weixin_44388523/article/details/90445885

https://blog.csdn.net/qq_42031498/article/details/106054343

https://github.com/cuth/postcss-pxtorem

https://github.com/mrsunx/lib-flexible#readme

关于vue的自适应布局(postcss-px2rem)的这篇文章到此为止。有关vue自适应布局的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。