设计稿是750px，根元素应该设置75，但是vant转换后好小，要改成35才行 #1181

lyseky · 2018-05-29T05:00:58Z

require('postcss-pxtorem')({
rootValue: 75, //默认根目录字体大小(px)
unitPrecision: 5, //保留小数位
propList: ['*'],
// selectorBlackList: [''], //过滤的类名
replace: true, //默认直接替换属性
mediaQuery: false,
minPixelValue: 6, //所有小于设置的样式都不被转换
}),

但是改了设计稿的宽度又对不上了，有什么好的解决方案

Xuemuyang · 2018-05-29T10:17:19Z

我的问题是postcss-pxtorem对vant的样式不生效，不知道怎么配置呢

lyseky · 2018-05-29T14:41:59Z

@Xuemuyang 样式要手动导入import 'vant/lib/vant-css/index.css'

MinosIE · 2018-05-30T01:58:24Z

@lyseky 使用 babel-plugin-import 插件之后，怎么处理？

lyseky · 2018-05-30T02:13:04Z

@MinosIE 在postcss.config.js上添加
module.exports = {
plugins: [
require('autoprefixer')({
remove: false
}),
require('postcss-pxtorem')({
rootValue: 35, //默认根目录字体大小(px)
unitPrecision: 5, //保留小数位
propList: ['*'],
// selectorBlackList: [''], //过滤的类名
replace: true, //默认直接替换属性
mediaQuery: false,
minPixelValue: 6, //所有小于设置的样式都不被转换
}),
require('postcss-border-width')()
]
}

Xuemuyang · 2018-05-30T02:29:20Z

这么配置vant内部的css样式会转成rem吗，我这里不会，应该是postcss没有对node_modules里的模块做处理

chenjiahan · 2018-05-30T12:34:04Z

rem 适配文档已更新 https://youzan.github.io/vant/#/zh-CN/quickstart

MinosIE · 2018-05-31T01:50:29Z

@lyseky 这样配置之后自己写的样式会转换，但是引用vant的样式不会转换。有的是rem，有的是px，这怎么搞？

shaoxiong789 · 2018-06-27T12:23:05Z

修改utils.js配置
css: generateLoaders('postcss'),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
这样就可以了

vonweb · 2018-07-05T10:13:56Z

@lyseky @chenjiahan vant使用的rootValue为37.5，但设计稿为75，怎么协调

chenjiahan · 2018-07-05T11:03:25Z

@vonweb vant 不限制 rootValue

vonweb · 2018-07-06T07:58:59Z

@chenjiahan 如果rootValue设置为75的话，vant组件很小，vant应该是按照@1x设置的大小

chenjiahan · 2018-07-06T08:28:58Z

@vonweb vant 并没有按照什么值设置，这个是看你根元素的 font size 的

vonweb · 2018-07-06T09:31:33Z

@chenjiahan 是按照淘宝解决方案设置的，iphone 6根元素font-size： 75px
现在想到的解决方案就是rootValue设为37.5，自己的scss样式使用mixin处理
如果只用有赞的UI库没有问题，再使用其他第三方库就又有问题了

webaifei · 2018-10-26T03:04:24Z

奉上一个解决方案
修改postcss.config.js配置

const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
    let remUnit;
// 判断条件 请自行调整 我使用的是 mand-mobile ui  没有对vant引入进行测试
    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"]
            })
        ]
    };
};

MaxMooc · 2018-11-22T03:07:00Z

: ) 貌似问题也没有解决啊

yangdengcheng · 2018-12-03T07:48:19Z

@chenjiahan 按照官网提供的rem解决方案，对于忽略node_modules文件夹还是没有找到合理的解决方案。只是按照过滤类名的方式进行修改。有没有什么更好的方法，谢谢。

postcss.config.js 配置如下

module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
selectorBlackList: ['van']
}
}
}

laogui · 2018-12-17T05:34:20Z

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

carrot-wu · 2019-01-07T08:35:58Z

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant

chencheng365 · 2019-03-21T10:13:10Z

@chenjiahan 按照官网提供的rem解决方案，对于忽略node_modules文件夹还是没有找到合理的解决方案。只是按照过滤类名的方式进行修改。有没有什么更好的方法，谢谢。

postcss.config.js 配置如下

直接在根目录下新建 postcss.config.js 没有效果呢？是什么原因呢

kakaxiu · 2019-04-27T17:20:52Z

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant

这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？

kakaxiu · 2019-04-27T17:37:12Z

找到一个解决方案，
selectorBlackList: ['van-']
可以过滤不处理所以带有'van-'开头的类名，vant组件就可以不被影响了。
但是用了这个方法就不要主动修改vant组件的样式，除非你给组件起一个别的不包含'vant-'的类名。

curryhh · 2019-05-20T06:03:32Z

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant

这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？

我也是vuecli3有没有合适的解决方案呢？

carrot-wu · 2019-05-20T06:09:23Z

@webaifei这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是postcss-px-to-viewport转换vw单位的：

// postcss.config.js 
const  join  =  require（ ' path '）。加入
常量 tailwindJS  =  加入（ __dirname， ' tailwind.js '）
模块。出口 =（{文件}） => {
  让 vwUnit //判断条件请自行调整我使用的是普通话-移动UI没有对VANT引入进行测试
  ，如果（文件 &&  文件。目录名 &&  文件。目录名。的indexOf（' vant '） >  - 1）{
    vwUnit =  375 
  } else {
    vwUnit =  750
  }
  返回 {
    插件： [
       require（' tailwindcss '）（tailwindJS），
       require（' postcss-px-to-viewport '）（{
        viewportWidth ： vwUnit，
        unitPrecision ： 3，
        viewportUnit ： ' vw '，
        selectorBlackList ： [ '. ignore '，'。 hairlines ' ]，
        minPixelValue ： 1，
        mediaQuery ： false
      }）
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant

这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？

我也是vuecli3有没有合适的解决方案呢？

在根目录下新建一个.postcssrc.js文件就可以了 vue-cli3也支持的不过注意的是新版的vant改了目录结构你可以试试我这种配置
module.exports = (ctx) => { const isNormalDpr = /\.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

curryhh · 2019-05-20T06:31:25Z

@webaifei这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是postcss-px-to-viewport转换vw单位的：
// postcss.config.js 
const  join  =  require（ ' path '）。加入
常量 tailwindJS  =  加入（ __dirname， ' tailwind.js '）
模块。出口 =（{文件}） => {
  让 vwUnit //判断条件请自行调整我使用的是普通话-移动UI没有对VANT引入进行测试
  ，如果（文件 &&  文件。目录名 &&  文件。目录名。的indexOf（' vant '） >  - 1）{
    vwUnit =  375 
  } else {
    vwUnit =  750
  }
  返回 {
    插件： [
       require（' tailwindcss '）（tailwindJS），
       require（' postcss-px-to-viewport '）（{
        viewportWidth ： vwUnit，
        unitPrecision ： 3，
        viewportUnit ： ' vw '，
        selectorBlackList ： [ '. ignore '，'。 hairlines ' ]，
        minPixelValue ： 1，
        mediaQuery ： false
      }）
    ]
  }
}
对的我也是根据文件名字判断引入的vant样式都带有vant
这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？
我也是vuecli3有没有合适的解决方案呢？
在根目录下新建一个.postcssrc.js文件就可以了 vue-cli3也支持的不过注意的是新版的vant改了目录结构你可以试试我这种配置
module.exports = (ctx) => { const isNormalDpr = /\.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂你的解释，ctx是改为van吗还是怎么弄呢？

carrot-wu · 2019-05-20T06:33:29Z

module.exports = (ctx) => { const isNormalDpr = /.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂你的解释，ctx是改为van吗还是怎么弄呢？

不用改你直接console.log（ctx）就知道了这个是当前vant文件的上下文如果读到是vant的css文件那么久应用下面的插件

curryhh · 2019-05-20T07:32:56Z

module.exports = (ctx) => { const isNormalDpr = /.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂你的解释，ctx是改为van吗还是怎么弄呢？

不用改你直接console.log（ctx）就知道了这个是当前vant文件的上下文如果读到是vant的css文件那么久应用下面的插件

直接复制弄进去吗？弄不了啊

curryhh · 2019-05-20T07:36:18Z

module.exports = (ctx) => { const isNormalDpr = /.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

看不懂你的解释，ctx是改为van吗还是怎么弄呢？

不用改你直接console.log（ctx）就知道了这个是当前vant文件的上下文如果读到是vant的css文件那么久应用下面的插件

可以给个邮箱或什么的直接交流吗？

curryhh · 2019-05-21T01:17:16Z

知道问题了各位可以如果要用.postcssrc.js首先要把package.json的postcss去掉要不然是忽略自定义的.postcssrc.js

wustzhaohui · 2019-06-22T10:04:57Z

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件请自行调整我使用的是 mand-mobile ui 没有对vant引入进行测试 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"] }) ] }; };

这个完美解决

fyh0714 · 2019-08-16T02:10:33Z

const { sep } = require('path')
module.exports = ({ file }) => {
let rootValue = file.dirname.indexof(node_modules${sep}vant) !== -1 ? 37.5 : 75
return {
plugins: {
'autoprefixer': {},
'postcss-pxtorem': {
rootValue,
propList: ['*']
}
}
}
}

nongzhenli · 2019-09-05T09:36:51Z

请问下，如果我不是用webpack，只是单纯的引入 src/link 引入文件，那么如何vw适配呢？
看的文章全部是webpack 的

sxp17600056616 · 2019-10-21T12:00:43Z

require（'postcss-pxtorem'）（{
rootValue：75，//根目录字体大小（px）
unitPrecision：5，//保留小数位
propList：['*']，
// selectorBlackList：['']， //过滤的类名称
replace：true，//将其直接替换属性
mediaQuery：false，
minPixelValue：6，// //所有小于设置的样式都不被转换
}），

但是改了设计稿的宽度又对不上了，有什么好的解决方案

https://www.cnblogs.com/yimei/p/11319657.html
看一下这片文章就可以了

huangrong6996 · 2019-11-12T01:07:03Z

找到一个解决方案，
selectorBlackList: ['van-']
可以过滤不处理所以带有'van-'开头的类名，vant组件就可以不被影响了。
但是用了这个方法就不要主动修改vant组件的样式，除非你给组件起一个别的不包含'vant-'的类名。

不主动修改样式之后，这个组件也没有做适配怎么解决呢

guagezuishuai · 2020-01-01T07:51:26Z

组件中有些行内样式你们是怎么处理的啊？

sunny920406 · 2020-02-03T13:28:34Z

@curryhh 这个方案完美！

GDCPedro · 2020-04-27T07:00:01Z

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件请自行调整我使用的是 mand-mobile ui 没有对vant引入进行测试 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"] }) ] }; };

这是单独写在postcss.config.js文件中的配置，那请问如果要写在webpack配置文件中该怎么写呢，貌似无法获取file参数

fangcongcong · 2020-08-01T02:12:31Z

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件请自行调整我使用的是 mand-mobile ui 没有对vant引入进行测试 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"] }) ] }; };

这个完美解决

vue.config.js 里面怎样使用的？

rex-ll · 2020-09-27T07:07:07Z

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant

这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？

我也是vuecli3有没有合适的解决方案呢？

https://cli.vuejs.org/zh/guide/css.html#postcss 明确说明了你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

但需要自己注意的是配置源要唯一。

xiaoai7904 · 2020-10-23T10:25:15Z

推荐一个项目示例地址参考,里面配置了vm和rem的适配示例地址

项目是vue3.0+vant3.0.0-beta.4版本来构建的

TravelleRjq · 2020-11-21T05:05:48Z

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-px2rem"); module.exports = ({ file }) => { let remUnit; // 判断条件请自行调整我使用的是 mand-mobile ui 没有对vant引入进行测试 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"] }) ] }; };

这个完美解决

vue.config.js 里面怎样使用的？

vue.config.js里面可以这么去写，rootValue 可以设置回调的
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*'],
minPixelValue: 1,
})
],
}
},
}

TravelleRjq · 2020-11-21T05:10:43Z

可以试下这样去配套组合使用
style的转换：postcss-pxtorem + amfe-flexible
html行内标签的转换：style-vw-loader
怎么装自行百度
这里就贴下怎么配置vue.config.js
module.exports = {
chainWebpack: config => {
config.module.rule('vue').test(/.vue$/)
.use('style-vw-loader')
.loader('style-vw-loader')
.options({
unitToConvert: 'px',
viewportWidth: 7500,
unitPrecision: 5,
viewportUnit: 'rem',
fontViewportUnit: 'rem',
minPixelValue: 1
})
},
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue ({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75
},
propList: ['*'],
minPixelValue: 1,
})
],
}
},
}
}

sizhuxuan · 2021-07-05T03:17:52Z

奉上一个解决方案
修改postcss.config.js配置

const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
    let remUnit;
// 判断条件 请自行调整 我使用的是 mand-mobile ui  没有对vant引入进行测试
    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"]
            })
        ]
    };
};

如果我设计图是750，但是我在切图的时候标的单位都/2，是不是都不用改了？我现在遇到的问题是，van-image外层自己写的样式会变大，单位是rem，但是里面的van-image样式还是px，导致我切换机型的时候定位角标不准，只在iphone6下是正常的，求老哥指点下

TravelleRjq · 2021-07-05T03:37:55Z

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
    let remUnit;
// 判断条件 请自行调整 我使用的是 mand-mobile ui  没有对vant引入进行测试
    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"]
            })
        ]
    };
};
如果我设计图是750，但是我在切图的时候标的单位都/2，是不是都不用改了？我现在遇到的问题是，van-image外层自己写的样式会变大，单位是rem，但是里面的van-image样式还是px，导致我切换机型的时候定位角标不准，只在iphone6下是正常的，求老哥指点下

设计图750不需要/2，postcss不会转换行内标签的样式

sizhuxuan · 2021-07-05T05:03:46Z

奉上一个解决方案
修改postcss.config.js配置
const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
    let remUnit;
// 判断条件 请自行调整 我使用的是 mand-mobile ui  没有对vant引入进行测试
    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"]
            })
        ]
    };
};
如果我设计图是750，但是我在切图的时候标的单位都/2，是不是都不用改了？我现在遇到的问题是，van-image外层自己写的样式会变大，单位是rem，但是里面的van-image样式还是px，导致我切换机型的时候定位角标不准，只在iphone6下是正常的，求老哥指点下
设计图750不需要/2，postcss不会转换行内标签的样式

需要/2吧，因为我基准值我使用的是vant默认的37.5啊，750的基准值应该是75吧，就是外边包了一层div在切换机型的时候会变大，导致角标定位不准，我不知道咋回事

chengliting · 2021-07-27T07:52:07Z

@webaifei这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是postcss-px-to-viewport转换vw单位的：
// postcss.config.js 
const  join  =  require（ ' path '）。加入
常量 tailwindJS  =  加入（ __dirname， ' tailwind.js '）
模块。出口 =（{文件}） => {
  让 vwUnit //判断条件请自行调整我使用的是普通话-移动UI没有对VANT引入进行测试
  ，如果（文件 &&  文件。目录名 &&  文件。目录名。的indexOf（' vant '） >  - 1）{
    vwUnit =  375 
  } else {
    vwUnit =  750
  }
  返回 {
    插件： [
       require（' tailwindcss '）（tailwindJS），
       require（' postcss-px-to-viewport '）（{
        viewportWidth ： vwUnit，
        unitPrecision ： 3，
        viewportUnit ： ' vw '，
        selectorBlackList ： [ '. ignore '，'。 hairlines ' ]，
        minPixelValue ： 1，
        mediaQuery ： false
      }）
    ]
  }
}
对的我也是根据文件名字判断引入的vant样式都带有vant
这个方案也许可以，但问题来了，在vue-cli3里只能在vue.config.js里面配置，它不允许postcss参数是个函数，这样要怎么配置呢？
我也是vuecli3有没有合适的解决方案呢？
在根目录下新建一个.postcssrc.js文件就可以了 vue-cli3也支持的不过注意的是新版的vant改了目录结构你可以试试我这种配置
module.exports = (ctx) => { const isNormalDpr = /\.css$/.test(ctx.file.basename) && /\bvant\b/.test(ctx.file.dirname) return { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": { rootValue: isNormalDpr ? 37.5 : 75, propList: ['*', '!font', '!font-size', '!border', '!border-width'], selectorBlackList: [], minPixelValue: 4 }, "postcss-adaptive": { remUnit: isNormalDpr ? 37.5 : 75, baseDpr: isNormalDpr ? 1 : 2, hairlineClass: ':global(.hairlines)' } } } }

报这个错咋办Error loading PostCSS config: Cannot read property 'basename' of undefined

Deeyu · 2022-03-01T06:38:54Z

@webaifei 这个方案太棒了，解决了vant和其他UI库字体大小不统一的问题。我用的是 postcss-px-to-viewport 转换vw单位的：

// postcss.config.js
const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')
module.exports = ({ file }) => {
  let vwUnit // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    vwUnit = 375
  } else {
    vwUnit = 750
  }
  return {
    plugins: [
      require('tailwindcss')(tailwindJS),
      require('postcss-px-to-viewport')({
        viewportWidth: vwUnit,
        unitPrecision: 3,
        viewportUnit: 'vw',
        selectorBlackList: ['.ignore', '.hairlines'],
        minPixelValue: 1,
        mediaQuery: false
      })
    ]
  }
}

对的我也是根据文件名字判断引入的vant样式都带有vant
这种方案在vite2中如何实现呢？

Richardend · 2022-04-28T09:13:52Z

我没有eject, 有rewirePostcss的方案吗

chenjiahan closed this as completed May 30, 2018

chenjiahan mentioned this issue Jul 12, 2018

使用lib-flexible样式问题 #1471

Closed

chenjiahan mentioned this issue Oct 23, 2018

vant的设计稿宽度是多少? #1962

Closed

chenjiahan mentioned this issue May 20, 2019

问下项目rem处理是用手淘flexible+postcss-px2rem处理rem的。但是在vant的组件样式里会缩小的，我单位是75px=1rem #3330

Closed

fangcongcong mentioned this issue Jul 30, 2020

怎么解决的啊 #6908

Closed

chenjiahan referenced this issue in vant-ui/vant-demo Aug 19, 2020

fix: rem rootValue

1b822b3

chenjiahan mentioned this issue Aug 19, 2020

rem适配方案组件样式有问题 vant-ui/vant-demo#64

Closed

sfsoul mentioned this issue Nov 4, 2020

Vue-cli 梳理 sfsoul/personalBlog#23

Open

chenjiahan mentioned this issue Apr 19, 2021

docs: add rem custom rootValue demo #8575

Merged

设计稿是750px，根元素应该设置75，但是vant转换后好小，要改成35才行 #1181

设计稿是750px，根元素应该设置75，但是vant转换后好小，要改成35才行 #1181

Comments

lyseky commented May 29, 2018

Xuemuyang commented May 29, 2018

lyseky commented May 29, 2018

MinosIE commented May 30, 2018

lyseky commented May 30, 2018

Xuemuyang commented May 30, 2018

chenjiahan commented May 30, 2018

MinosIE commented May 31, 2018

shaoxiong789 commented Jun 27, 2018 • edited

vonweb commented Jul 5, 2018

chenjiahan commented Jul 5, 2018

vonweb commented Jul 6, 2018

chenjiahan commented Jul 6, 2018

vonweb commented Jul 6, 2018

webaifei commented Oct 26, 2018 • edited by chenjiahan

MaxMooc commented Nov 22, 2018

yangdengcheng commented Dec 3, 2018

laogui commented Dec 17, 2018

carrot-wu commented Jan 7, 2019

chencheng365 commented Mar 21, 2019 • edited

kakaxiu commented Apr 27, 2019

kakaxiu commented Apr 27, 2019

curryhh commented May 20, 2019

carrot-wu commented May 20, 2019

curryhh commented May 20, 2019

carrot-wu commented May 20, 2019

curryhh commented May 20, 2019

curryhh commented May 20, 2019

curryhh commented May 21, 2019

wustzhaohui commented Jun 22, 2019

fyh0714 commented Aug 16, 2019

nongzhenli commented Sep 5, 2019

sxp17600056616 commented Oct 21, 2019

huangrong6996 commented Nov 12, 2019

guagezuishuai commented Jan 1, 2020

sunny920406 commented Feb 3, 2020

GDCPedro commented Apr 27, 2020

fangcongcong commented Aug 1, 2020

rex-ll commented Sep 27, 2020

xiaoai7904 commented Oct 23, 2020

TravelleRjq commented Nov 21, 2020

TravelleRjq commented Nov 21, 2020

sizhuxuan commented Jul 5, 2021

TravelleRjq commented Jul 5, 2021

sizhuxuan commented Jul 5, 2021

chengliting commented Jul 27, 2021

Deeyu commented Mar 1, 2022

Richardend commented Apr 28, 2022

shaoxiong789 commented Jun 27, 2018 •

edited

webaifei commented Oct 26, 2018 •

edited by chenjiahan

chencheng365 commented Mar 21, 2019 •

edited