移动端适配问题

[hcxmj]

Version of antd-mobile

5.21.0

Operating system and its version

iOS, Android

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

swiper组件在pc上chrome浏览器中样式正常，到移动端上后样式适配没有生效； 适配方式：rem---lib-flexible+postcss-pxtorem

    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.0",
    "postcss": "^8.4.16",
    "postcss-loader": "^7.0.1",
    "postcss-pxtorem": "^6.0.0",

webpack配置

          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  autoprefixer(),
                  px2rem({ rootValue: 75, unitPrecision: 5, exclude: /node_modules/i, propList: ['*'] })
                ]
              }
            }
          }

Relevant log output

No response

[hcxmj]

看起来是对内嵌css样式没有生效的原因

[IronKinoko]

postcss-pxtorem 只处理 css 文件，不会处理 js 文件

[hcxmj]

只支持行内样式的写法吗，能否提供class写法通过rem进行适配

[hcxmj]

postcss-pxtorem 只处理 css 文件，不会处理 js 文件

对swiper组件的样式有class属性进行配置吗，不然只有手动转化为rem吗

[IronKinoko]

.custom-wrapper {
  --dot-szie: 14px;
}

<Component className="custom-wrapper" />

你把这些自定义的属性，写到 css 文件里就可以了

[hcxmj]

谢谢，我试试看