vue项目中使用了vw适配方案，引入第三方ui框架mint-ui时，适配问题解决

问题分析：

一般第三方ui框架用的都是不同的适配方式，如果我们使用了vw适配，那么在使用mint-ui框架时，就会发现px单位会被转换成vw，从而导致样式变小的问题，如图

解决方案

网上看到了很多种解决方案，这里推荐第四种

1、重写第三方组件ui样式大小

2、在postcss.config.js中的selectorBlackList选项中增加不需要vw转换的类名

selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.

3、使用rem适配方案，将原本750的宽度设置为一半，配置成37.5

https://www.jianshu.com/p/8f9aab666c4a

4、添加exclude选项，将node_modules目录排除掉，即不会受影响

在node_mudule中找到postcss-px-to-viewport，修改index.js新增对exclude选项的处理

module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {

  var opts = objectAssign({}, defaults, options);

  var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);

  return function (css) {

    css.walkDecls(function (decl, i) {

      if (options.exclude) {  // 添加对exclude选项的处理

        if (Object.prototype.toString.call(options.exclude) !== '[object RegExp]') {

          throw new Error('options.exclude should be RegExp!')

        }

        if (decl.source.input.file.match(options.exclude) !== null) return;

      }

      // This should be the fastest test and will remove most declarations

      if (decl.value.indexOf('px') === -1) return;

      if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;

      decl.value = decl.value.replace(pxRegex, pxReplace);

    });

    if (opts.mediaQuery) {

      css.walkAtRules('media', function (rule) {

        if (rule.params.indexOf('px') === -1) return;

        rule.params = rule.params.replace(pxRegex, pxReplace);

      });

    }

  };

});

然后在.postcssrc.js添加postcss-px-to-viewport的exclude选项

"postcss-px-to-viewport": {

  viewportWidth: 750,

  viewportHeight: 1334,

  unitPrecision: 3,

  viewportUnit: 'vw',

  selectorBlackList: ['.ignore', '.hairlines'],

  minPixelValue: 1,

  mediaQuery: false,

  exclude: /(\/|\\)(node_modules)(\/|\\)/

},

这里需要注意了，在没有修改postcss-px-to-viewport的index.js文件，直接在.postcssrc.js中添加了以下代码也成功了

exclude: /(\/|\\)(node_modules)(\/|\\)/

然后我去node_mudele下找到postcss-px-to-viewport的index.js打开发现了如下代码，看来是postcss-px-to-viewpor这个插件增加了对这个问题的处理，我使用的版本是"postcss-px-to-viewport": "^1.1.0",

if (opts.exclude && file) {

        if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {

          if (isExclude(opts.exclude, file)) return;

        } else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {

          for (let i = 0; i < opts.exclude.length; i++) {

            if (isExclude(opts.exclude[i], file)) return;

          }

        } else {

          throw new Error('options.exclude should be RegExp or Array.');

        }

      }

参考阅读

Vue+ts下的移动端vw适配（第三方库css问题）

巴特西

vue项目中使用了vw适配方案，引入第三方ui框架mint-ui时，适配问题解决

问题分析：

解决方案

参考阅读

最新文章

热门文章