px2rem-loader和lib-flexible，lib-flexible和postcss-pxtorem和第三方框架搭配使用

最新推荐文章于 2023-09-19 11:22:27 发布

置顶星河·

最新推荐文章于 2023-09-19 11:22:27 发布

阅读量3.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43365995/article/details/103527912

vue 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了使用VUE进行移动端自适应的方法，包括px2rem-loader和lib-flexible的配置，以及如何解决引入VantUI框架后的样式问题。提供了三种解决方案，涉及不同配置和过滤策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE 做移动端自适应，使用px2rem-loader和lib-flexible，转换px为rem

1、在main.js中引入lib-flexible
npm i lib-flexible px2rem-loader --save-dev
配置build/utils.js中的px2remLoader 方法为75
配置这个值是为了适配自己的设计图75代表设计图为750px设计的

const px2remLoader = {
　　loader：'px2rem-loader',
　　options:{
　　　　remUnit:75
　　}
}

但是后期，发现自己要用vantUI框架，而当我引入之后，发现所有的组件样式都比样例要小，一开始很是懵逼后来查询之后发现，原来是因为vantUI的根字体默认大小是37.5，和我们默认设置的75不一样，正好是2倍关系，所以当我们的设计图是750的时候，我们的组件就会看起来是1/2的大小，解决这种问题有三种方法：

1、自己要用vant，设置为37.5，在使用ui的设计图时，用1/2的单位来布局，这种显然是个很鸡肋的办法，简言之：可以但没必要！ – 作者君就是用的这种方法

2、不用px2rem-loader和lib-flexible搭配，而是使用：lib-flexible和postcss-pxtorem搭配，因为lib-flexible和postcss-pxtorem里面有一个过滤功能，可以让我们过滤掉以van开头的样式：在引入的postcssrc.js里面设置：

module.exports={
　　plugins:{
　　　　'postcss-pxtorem':{
　　　　　　rootValue:75,
　　　　　　propList:['*'],
　　　　　　selectorBlackList:['van']
　　　　}
　　}
}

3、第三种办法就是使用判断条件，依然是在postcssrc.js里面修改：

const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
　　let remUnit;
　　// 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
　　//link https://github.com/youzan/vant/issues/1181
　　if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
　　　　remUnit = 37.5;
　　}else {
　　　　remUnit = 75;
　　}
　　return {
　　　　plugins: [
　　　　　　px2rem({ remUnit: remUnit}),
　　　　　　AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] })
　　　　]
　　};
};

最后如果本博文对你有所帮助请点个赞给与支持