移动端选择器组件比例错误？Zarm 选择器踩坑指南

2023-12-02 16:11:03

在开发过程中，当需要用到 picker 的表单填报功能块时，弹出选择框时会遇到比例错误的问题。项目主要用到的组件库是 Zarm，配合 postcss-px-to-viewport 进行开发。针对这样的问题，本文将提供解决方案，帮助开发者解决 Zarm 选择器组件比例错误的问题。

首先，需要了解 Zarm 选择器组件比例错误的原因。主要有以下几点：

使用 rem 或 em 单位。 rem 和 em 单位是相对于根元素或父元素的字体大小来计算的，这会导致在不同设备上显示不同的大小。
使用固定宽度或高度。 如果选择器组件的宽度或高度设置为固定值，则在不同尺寸的设备上显示时可能会变形。
没有正确设置 flexbox 布局。 如果选择器组件使用 flexbox 布局，则需要正确设置 flex-grow、flex-shrink 和 flex-basis 等属性，以确保组件在不同尺寸的设备上能够正确显示。

针对以上原因，可以采取以下解决方案：

使用 vw 或 vh 单位。 vw 和 vh 单位是相对于视口宽度的百分比，这可以确保选择器组件在不同设备上显示相同的大小。
使用弹性布局。 弹性布局可以使选择器组件在不同尺寸的设备上自动调整大小。
正确设置 flexbox 布局。 确保 flex-grow、flex-shrink 和 flex-basis 等属性设置正确。

除了以上解决方案外，还可以使用 postcss-px-to-viewport 插件来解决 Zarm 选择器组件比例错误的问题。postcss-px-to-viewport 插件可以将 px 单位转换为 vw 或 vh 单位，从而确保选择器组件在不同设备上显示相同的大小。

需要注意的是，在使用 postcss-px-to-viewport 插件时，需要在 postcss.config.js 文件中进行配置。具体配置如下：

module.exports = {
  plugins: [
    require('postcss-px-to-viewport')({
      viewportWidth: 375, // 设计稿的视口宽度
      viewportHeight: 667, // 设计稿的视口高度
      unitPrecision: 5, // 转换后的精度，即小数点后保留几位
      viewportUnit: 'vw', // 转换后的单位，可以是vw或vh
      selectorBlackList: ['.ignore'], // 忽略转换的CSS选择器，可以是一个数组
      minPixelValue: 1, // 设置要替换的最小像素值，低于此设置值时不替换
      mediaQuery: false, // 是否在媒体查询中也转换，默认false
    }),
  ],
};