vant icon indicating copy to clipboard operation
vant copied to clipboard

[Bug Report] Rem 布局适配方案存在缺陷,组件中的内联样式 px 单位无法使用 postcss-pxtorem 转化为 rem

Open CherishTheYouth opened this issue 4 months ago • 3 comments

Reproduction Link

该问题的使用场景无法使用沙盒复现

Vant Version

4.8.1

Describe the Bug

根据文档进阶用法一章,Rem 布局适配模块,如果需要使用 rem 单位进行适配,推荐使用以下两个工具:

postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基准值

基于 postcss-pxtorem 的方案只能将 css 中的 px 转化为 rem, 但是部分组件中存在内联样式,这部分样式的 px 是无法进行转换的。

以下是 Picker 组件中的一段源码

// Picker.tsx
    const renderColumns = () => {
      const wrapHeight = optionHeight.value * +props.visibleOptionNum;
     // 这里的内联样式以 px 为单位,无法被插件转化为 rem
      const columnsStyle = { height: `${wrapHeight}px` };
      return (
        <div ref={columnsRef} class={bem('columns')} style={columnsStyle}>
          {renderColumnItems()}
          {renderMask(wrapHeight)}
        </div>
      );
    };

而这样的实现还有很多。 image

Reproduce Steps

  1. 按照进阶用法一章, rem 布局适配部分方案做适配方案;
  2. 使用 DatePicker 组件渲染一个 时间选择器组件;
  3. 查看组件的部分样式,看是否存在内联样式未正确转化为 rem 的问题;

Device / Browser

Microsoft Edge 版本 125.0.2535.92 (正式版本) (64 位)

CherishTheYouth avatar Sep 25 '24 04:09 CherishTheYouth