图纸是 750的，但是 vant等移动端框架的根字体是37.5，就会出现组件变小

水月洞天2003

于 2019-08-08 09:49:27 发布

阅读量4.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue 移动端文章标签： vant 组件变小

本文链接：https://blog.youkuaiyun.com/qq_24191729/article/details/98846587

Vue 移动端专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种Vue项目中实现自适应布局的方法：一是结合lib-flexible与px2rem，修改until.js，适用于非Vant框架；二是lib-flexible搭配postcss-px2rem，通过.postcssrc.js文件配置，特别针对Vant框架组件自适应。

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

Vue 自适应的两种方式：

1.lib-flexible+px2rem 修改 until.js 文件 (不能对vant框架进行处理)

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75
  }
}
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

2 .lib-flexible+postcss-px2rem 修改 .postcssrc.js 文件 (可以对vant框架进行处理)

1 对vant 进行过滤，输出还是 px(页面不会自适应，但是组件可以变大了)

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

2 根据文件修改根字体

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"] })]
  };
};