nuxt 引入 flexible.js

关于 flexible.js 资源请自行下载.  http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js

这里 ssr 我设置了false,因为报错提示 document is not defined

plugins: [    
    {
      src: '~plugins/three_sides/flexble.js', ssr: false
    }
  ],

为了配合使用我安装了 postcss-pxtorem 以及 autoprefixer 

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

      require('autoprefixer')({
        overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
      }),
    ],

这里 rootValue 我给到了 37.5 。

最开始用vscode自带的插件(px to rem)转换的时候我设置的是16,样式基本就比较正常了。

但是后来发现van里面样式在切屏转换的时候一些基础的样式因为还是用的px导致没有响应的放大或缩小,于是我重新用了postcss-pxtorem,随之而来的问题就是整个 vant 的 size 很大,于是最终用了 37.5  

 

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页