Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.9k views
in Technique[技术] by (71.8m points)

vue+vant写webapp,postcss-pxtorem、lib-flexible配置之后怎么使用?

vant 2.9.3
vue/cli 4.4.6
根据官网的Rem适配说明,下载安装了postcss-pxtorem、lib-flexible,并且按照官方推荐的方式做了设置,我看见有人说写px并回车这些工具会自动将px换算成rem,但我不知道该怎么使用,我也看不到效果。
配置:

// vue.config.js 
  css: {
    loaderOptions: {
      sass: {
        // to: sass-loader
        prependData:
          '@import "@/assets/scss/_variables.scss";@import "@/assets/scss/style.scss";'
      },
      postcss: {
        // to: postcss-loader
        plugins: [
          autoprefixer({
            overrideBrowserslist: ["Android >= 4.0", "iOS >= 8"]
          }),
          pxtorem({
            rootValue: 37.5,
            propList: ["*"]
          })
        ]
      }
    }
  }

例如我需要在375*667(iPhone6/7/8)的尺寸设置20px的字体font-size:20px,在切换成414*736(iPhone6/7/8 plus)的尺寸还是20px,并没有进行自适应。

另外,除了postcss-pxtorem、lib-flexible,我在项目中使用了自己日常习惯的style.scss,也包含了字号的px到rem转化,拿20px字号为例,在375*667(iPhone6/7/8)显示的是19.9999px,类似这种都不是整数的情况。这种情况正常吗?有了vant官方的建议,我是不是该放弃使用style.scss中的字号样式?

感谢提出建议!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

引入之后还需要配置调用,可以看看文章https://blog.csdn.net/Coding_...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...