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

发布于 2022-09-12 13:11:10 字数 1041 浏览 19 评论 0

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中的字号样式?

感谢提出建议!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

恋你朝朝暮暮 2022-09-19 13:11:11

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文