vant
vant copied to clipboard
[Bug Report] Rem 布局适配方案存在缺陷,组件中的内联样式 px 单位无法使用 postcss-pxtorem 转化为 rem
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>
);
};
而这样的实现还有很多。
Reproduce Steps
- 按照进阶用法一章, rem 布局适配部分方案做适配方案;
- 使用 DatePicker 组件渲染一个 时间选择器组件;
- 查看组件的部分样式,看是否存在内联样式未正确转化为 rem 的问题;
Device / Browser
Microsoft Edge 版本 125.0.2535.92 (正式版本) (64 位)