zb-plate-keyboard

zb-plate-keyboard 车牌键盘组件

基于 Vue2 的车牌号输入组件，兼容 UniApp 和纯 HTML 环境，支持微信小程序、支付宝小程序、H5。

特性

• iOS 风格拟真键盘，3D 凸起按键 + 按压凹陷反馈
• 省份 / 字母 Tab 切换，自动切换至字符键盘
• QWERTY 全键盘布局，行居中偏移模拟真实键盘
• 格子模式基于固定长度 8 数组，点击任意格子精准定位光标
• 可选在自定义键盘面板内实时预览车牌格子（showPlatePreview，默认关闭），点击任意已输入格子即可编辑
• 支持新能源车牌 8 位输入
• 支持系统键盘切换
• 兼容 UniApp 多端和纯 Vue2+HTML 环境
• 支持 npm 安装和 script 外链引入

环境兼容

组件自动检测运行环境，兼容两种使用场景：

UniApp 环境

在 UniApp 项目中，组件使用：

• view、text、image 组件标签
• uni.request API（用于远程获取车牌号）
• rpx 单位样式（自适应屏幕）

纯 HTML 环境

在纯 Vue2+HTML 项目中，组件自动切换为：

• div、span、img HTML 标签
• fetch API（用于远程获取车牌号）
• vw 单位样式（动态注入，无需引入 zb-plate-keyboard.css）

样式自动注入原理：

• 组件在 mounted 时检测非 UniApp 环境
• 通过 JavaScript 动态注入 vw 单位的 CSS
• 解决 rpx 单位在纯 HTML 环境不生效的问题
• 移动端 H5 已修复 hover 状态持续问题（使用 @media (hover: hover) 媒体查询）

无需引入 zb-plate-keyboard.css，组件自动处理样式适配。

快速测试

纯 HTML 测试

项目包含测试文件，可直接在浏览器中打开：

# 方式一：直接打开
open test.html

# 方式二：本地服务器
npx serve .
# 访问 http://localhost:3000/test.html

UniApp 测试

使用 HBuilderX 打开项目，运行到浏览器或小程序。

安装

方式一：npm 安装

适用于 UniApp 项目、Vue2 项目。

1. 安装依赖

npm install zb-plate-keyboard

2. 按场景引入组件

场景一：普通 Vue2 / H5 打包项目

适用于 Vite、Webpack、Vue CLI 等常规 Vue2 项目。

全局注册：

// main.js
import Vue from 'vue'
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Vue.component('zb-plate-keyboard', ZbPlateKeyboard)

局部注册：

<template>
  <zb-plate-keyboard v-model="plateNo" />
</template>

<script>
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

export default {
  components: {
    ZbPlateKeyboard
  },
  data() {
    return {
      plateNo: ''
    }
  }
}
</script>

Vue.use 方式：

// main.js
import Vue from 'vue'
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Vue.use(ZbPlateKeyboard)

场景二：uni-app H5

uni-app 编译到 H5 时，也建议优先使用包根入口：

import Vue from 'vue'
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Vue.component('zb-plate-keyboard', ZbPlateKeyboard)

场景三：uni-app 微信小程序 / 支付宝小程序

小程序编译器不支持组件源码中的动态组件写法，因此不要使用包根入口：

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

export default {
  components: {
    ZbPlateKeyboard
  }
}

模板中正常使用：

<zb-plate-keyboard v-model="plateNo" mode="template" />

场景四：uni-app easycom

如果你的 uni-app 项目能正确识别 npm 包 easycom，也可以直接使用组件标签。

当前包内已经提供 easycom 映射和小程序静态组件入口：

• zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue
• package.json > easycom.custom

但不同 uni-app / HBuilderX 版本对 npm easycom 支持表现不完全一致。 如果遇到仍然解析到 dist/zb-plate-keyboard.es 的情况，优先改回“场景三”的显式 .vue 引入方式。

UniApp 小程序说明

微信小程序、支付宝小程序端不要直接引用 dist/zb-plate-keyboard.es.js。

• npm 安装后直接 import ZbPlateKeyboard from 'zb-plate-keyboard' 即可
• 包默认会优先解析到 CommonJS 入口，避免小程序运行时直接解析 ESM 失败
• 样式仍然正常引入：import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'
• easycom 场景下，组件会映射到 zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue
• 发布时必须把 components/ 目录一起发到 npm

补充说明：上面“直接 import ZbPlateKeyboard from 'zb-plate-keyboard'”更适合普通 Vue2/H5。 在 uni-app 微信小程序、支付宝小程序里，推荐使用“场景三”的显式 .vue 路径导入。

方式二：script 外链引入

适用于原生 HTML 页面、非打包项目。

1. 引入文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>车牌键盘示例</title>
  <!-- 引入 Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <!-- 引入组件（样式由 JS 自动注入） -->
  <script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>
</head>
<body>
  <div id="app">
    <!-- 组件已自动注册，可直接使用 -->
    <zb-plate-keyboard v-model="plateNo" mode="template" />
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        plateNo: ''
      }
    })
  </script>
</body>
</html>

2. 手动注册（可选）

如果 Vue 未全局暴露，可手动注册：

<script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>
<script>
  // 手动注册
  Vue.component('zb-plate-keyboard', ZbPlateKeyboard)
  
  new Vue({
    el: '#app',
    data: { plateNo: '' }
  })
</script>

编译

开发环境

要求

• Node.js >= 14.18.0
• npm >= 6.0.0

安装开发依赖

# 克隆项目
git clone https://github.com/xxx/zb-plate-keyboard.git

# 进入目录
cd zb-plate-keyboard

# 安装依赖
npm install

构建命令

# 构建生产版本
npm run build

# 开发模式（监听文件变化）
npm run dev

构建产物

构建完成后，dist/ 目录包含：

dist/
├── zb-plate-keyboard.es.js    # ESM 格式（现代打包工具）
├── zb-plate-keyboard.cjs.js   # CommonJS 格式（uni-app/小程序 npm 更友好）
├── zb-plate-keyboard.umd.js   # UMD 格式（用于 script 引入）
└── zb-plate-keyboard.css      # 样式文件

文件说明

发布到 npm

1. 创建 Automation Token（推荐）

使用 Automation Token 可以绕过两步验证（2FA），无需每次输入 OTP：

步骤：

1. 访问：https://www.npmjs.com/settings/你的用户名/tokens

2. 点击 "Generate New Token" → "Classic Token"

3. 选择 Automation 类型（关键：可绕过 2FA）

4. 复制生成的 token（类似：npm_xxxxxxxxxxxxxxxx）

5. 在项目根目录创建 .npmrc 文件：

# .npmrc 文件内容
//registry.npmjs.org/:_authToken=你的token
registry=https://registry.npmjs.org/

示例：

//registry.npmjs.org/:_authToken=npm_ABC123XYZ456
registry=https://registry.npmjs.org/

3. 确保 .npmrc 不被提交到 Git：

# .gitignore 文件中添加
.npmrc

2. 发布命令（无需 OTP）

配置 token 后，可直接发布：

# 小版本更新（修复 bug）: 1.0.0 → 1.0.1
npm run publish:patch

# 中版本更新（新功能）: 1.0.0 → 1.1.0
npm run publish:minor

# 大版本更新（重大变更）: 1.0.0 → 2.0.0
npm run publish:major

# 快速发布（自动 patch）
npm run publish:quick

# 手动发布（不递增版本）
npm run publish:manual

3. 发布流程说明

自动化脚本会执行以下步骤：

1. 检查 npm 认证（token 或 login）
2. 自动递增版本号（修改 package.json）
3. 构建项目（npm run build）
4. 发布到 npm（自动使用 token，无需 OTP）

4. 验证认证状态

# 检查当前认证用户
npm whoami

# 应显示你的 npm 用户名

5. 验证发布

npm info zb-plate-keyboard

# 查看在线包
https://www.npmjs.com/package/zb-plate-keyboard

6. 版本历史

查看 CHANGELOG.md 了解版本更新历史。

发布到 CDN

将 dist/ 文件上传到 CDN：

# 示例：上传到阿里云 OSS
ossutil cp dist/ oss://your-bucket/zb-plate-keyboard/ -r

使用

UniApp 项目集成

H5 平台

<template>
  <view class="page">
    <zb-plate-keyboard
      mode="template"
      v-model="plateNo"
      :theme="themeConfig"
      @confirm="handleSubmit"
      @blur="handleBlur"
    />
    
    <button @tap="submit">提交</button>
  </view>
</template>

<script>
import ZbPlateKeyboard from 'zb-plate-keyboard'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

export default {
  components: { ZbPlateKeyboard },
  data() {
    return {
      plateNo: '',
      themeConfig: {
        primary: '#1677ff',
        border: '#ddd',
        activeBg: '#f5f5f5',
        textColor: '#333'
      }
    }
  },
  methods: {
    handleSubmit(value) {
      console.log('确认车牌：', value)
    },
    handleBlur() {
      console.log('键盘关闭')
    },
    submit() {
      if (this.plateNo.length < 7) {
        uni.showToast({ title: '请输入完整车牌号', icon: 'none' })
        return
      }
      // 提交逻辑
      uni.request({
        url: 'https://api.xxx.com/submit',
        method: 'POST',
        data: { plateNo: this.plateNo }
      })
    }
  }
}
</script>

微信小程序

<template>
  <view class="page">
    <zb-plate-keyboard
      mode="template"
      v-model="plateNo"
      :allow-native-keyboard="false"
      @confirm="handleConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  },
  methods: {
    handleConfirm(value) {
      // 微信小程序特有逻辑
      wx.setStorageSync('plateNo', value)
    }
  }
}
</script>

系统键盘特性

使用系统键盘时，组件会自动处理：

• 字母自动转大写：输入的小写字母会自动转换为大写
• 例如：输入 京a123b → 自动转换为 京A123B
• 符合车牌号规范（字母部分必须大写）

支付宝小程序

<template>
  <view class="page">
    <zb-plate-keyboard
      mode="input"
      v-model="plateNo"
      placeholder="请输入车牌号"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  }
}
</script>

原生 HTML 项目集成

完整示例（样式由组件自动注入，无需手动引入 CSS）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>车牌键盘 - 原生 HTML 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>
  <style>
    body { padding: 20px; background: #f5f5f5; }
    .container { max-width: 500px; margin: 0 auto; }
    .title { font-size: 18px; margin-bottom: 20px; }
    .result { margin-top: 20px; padding: 10px; background: #fff; }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="title">车牌号输入</div>
      
      <!-- 格子模式 -->
      <zb-plate-keyboard
        mode="template"
        v-model="plateNo"
        @confirm="onConfirm"
      />
      
      <!-- 结果显示 -->
      <div class="result">
        <div>车牌号：{{ plateNo }}</div>
        <div>长度：{{ plateNo.length }}</div>
      </div>
      
      <!-- 控制按钮 -->
      <button @click="clear">清空</button>
      <button @click="setPlate">设置默认值</button>
    </div>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data: {
        plateNo: ''
      },
      methods: {
        onConfirm(value) {
          console.log('确认输入：', value)
          alert('车牌号：' + value)
        },
        clear() {
          this.plateNo = ''
        },
        setPlate() {
          this.plateNo = '京A12345'
        }
      }
    })
  </script>
</body>
</html>

远程获取车牌号

组件支持自动从远程接口获取车牌号并回填，支持异步 URL 挂载。

基础用法

<template>
  <zb-plate-keyboard
    mode="template"
    v-model="plateNo"
    :enable-remote-fetch="true"
    remote-fetch-url="https://api.xxx.com/get-default-plate"
    @remote-fetch-success="onSuccess"
    @remote-fetch-error="onError"
  />
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  },
  methods: {
    onSuccess(code) {
      console.log('获取成功：', code)
    },
    onError(err) {
      console.error('获取失败：', err)
    }
  }
}
</script>

异步 URL 挂载（延迟请求）

当请求 URL 需要参数（如用户 ID、订单 ID）时，支持异步赋值：

<template>
  <zb-plate-keyboard
    mode="template"
    v-model="plateNo"
    :enable-remote-fetch="true"
    :remote-fetch-url="fetchUrl"
    @remote-fetch-success="onSuccess"
  />
</template>

<script>
export default {
  data() {
    return {
      plateNo: '',
      userId: '',
      fetchUrl: ''  // 初始为空
    }
  },
  async created() {
    // 异步获取用户 ID
    this.userId = await this.getUserId()
    
    // URL 就绪后自动触发请求（无需手动调用）
    this.fetchUrl = `https://api.xxx.com/get-plate?userId=${this.userId}`
  },
  methods: {
    getUserId() {
      return Promise.resolve('123456')
    },
    onSuccess(code) {
      console.log('获取成功：', code)
    }
  }
}
</script>

特性说明：

• 监听 remoteFetchUrl 变化，从空变为有值时自动触发请求
• 当 value 为空且 enableRemoteFetch=true 时才会请求
• 使用 _hasFetched 标记避免重复请求
• 失败后自动重置标记，允许再次尝试

接口要求

• 方法：GET
• 响应格式：
  • 纯文本："京" 或 "京A"
  • JSON：{data: "京A"} 或 {plateCode: "京A"} 或 {result: "京A"}

自定义主题

<template>
  <zb-plate-keyboard
    mode="template"
    v-model="plateNo"
    :theme="customTheme"
  />
</template>

<script>
export default {
  data() {
    return {
      plateNo: '',
      customTheme: {
        primary: '#ff6b00',      // 主色（橙色）
        border: '#e0e0e0',       // 边框色
        activeBg: '#fff3e0',     // 选中背景色
        textColor: '#333'        // 文字颜色
      }
    }
  }
}
</script>

外部控制键盘

<template>
  <view>
    <input v-model="plateNo" @focus="showKeyboard" />
    
    <zb-plate-keyboard
      ref="keyboard"
      mode="custom"
      v-model="plateNo"
    />
  </view>
</template>

<script>
export default {
  data() {
    return { plateNo: '' }
  },
  methods: {
    showKeyboard() {
      this.$refs.keyboard.show()
    },
    hideKeyboard() {
      this.$refs.keyboard.hide()
    },
    setPlate() {
      // 设置车牌并定位光标
      this.$refs.keyboard.setPlateNum('粤B88888')
    }
  }
}
</script>

Props

theme 默认值

{
  primary: '#1677ff',
  border: '#ddd',
  activeBg: '#f5f5f5',
  textColor: '#333'
}

Events

Methods

模式说明

mode = input（输入框模式）

自带输入框，点击后弹出键盘。

<zb-plate-keyboard
  mode="input"
  v-model="plateNo"
  placeholder="请输入车牌号"
/>

无边框输入框：

<zb-plate-keyboard
  mode="input"
  v-model="plateNo"
  :show-border="false"
  placeholder="请输入车牌号"
/>

mode = template（格子模式）

显示车牌格子，点击格子弹出键盘。

<zb-plate-keyboard
  mode="template"
  v-model="plateNo"
/>

mode = custom（纯键盘模式）

不显示输入区域，需外部控制。

<zb-plate-keyboard
  ref="keyboard"
  mode="custom"
  v-model="plateNo"
/>

this.$refs.keyboard.show()
this.$refs.keyboard.hide()

键盘布局

省份面板

京 沪 粤 津 冀 豫 云 辽 黑 湘
皖 鲁 新 苏 浙 赣 鄂 桂 甘
晋 蒙 陕 吉 闽 贵 渝 川
青 藏 琼 宁 港 澳 使 领 ⌫

字符面板

1 2 3 4 5 6 7 8 9 0
Q W E R T Y U I O P
  A S D F G H J K L
    Z X C V B N M
港 澳 学 警 挂 领 使 ⌫

目录结构

zb-plate-keyboard/
├── src/
│   ├── index.vue       # 组件主文件（含 vw 样式注入）
│   ├── install.js      # Vue 插件安装（UMD 自动注册）
│   ├── api.js          # API 封装（uni.request/fetch）
│   └── env.js          # 环境检测（isUniApp）
├── dist/
│   ├── zb-plate-keyboard.es.js   # ESM 格式
│   ├── zb-plate-keyboard.umd.js  # UMD 格式（含 vw 样式）
│   └── zb-plate-keyboard.css                  # rpx 样式（UniApp 专用）
├── package.json
├── vite.config.js
└── README.md

样式适配机制

UniApp 环境

使用 rpx 单位（UniApp 自动适配不同屏幕宽度）：

.plate-keyboard-key {
  height: 80rpx;
  min-width: 60rpx;
}

需手动引入 zb-plate-keyboard.css：

import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

纯 HTML 环境

使用 vw 单位（组件动态注入）：

.plate-keyboard-key {
  height: 10.667vw;  /* 80rpx / 750 * 100 */
  min-width: 8vw;    /* 60rpx / 750 * 100 */
}

无需引入 CSS 文件，组件在 mounted 时自动检测环境并注入 vw 样式：

mounted() {
  if (!this._isUniApp && typeof document !== 'undefined') {
    this.injectH5AdaptStyles()  // 动态注入 vw 样式
    this.initWeixinFontSize()   // 微信字体锁定
  }
}

H5 Hover 状态修复

移动端 H5 点击后 hover 状态会持续存在，已通过媒体查询修复：

/* 只在支持 hover 的设备（桌面端）生效 */
@media (hover: hover) {
  .plate-keyboard-key:hover {
    opacity: 0.5;
    background: #d2d5db;
  }
}

/* 移动端使用 :active */
.plate-keyboard-key:active {
  opacity: 0.5;
  background: #d2d5db;
}

跨端兼容

组件使用 UniApp API，兼容多端：

// 使用 uni.request（替代 fetch）
uni.request({ url, method: 'GET' })

// 使用 uni.setStorageSync（替代 localStorage）
uni.setStorageSync('key', value)
uni.getStorageSync('key')

// 条件编译处理平台差异
// #ifdef H5
// H5 特有逻辑
// #endif

// #ifdef MP-WEIXIN
// 微信小程序特有逻辑
// #endif

// #ifdef MP-ALIPAY
// 支付宝小程序特有逻辑
// #endif

兼容性

注意事项

1. 格子模式默认新能源 8 位
2. 键盘无遮罩层，只能通过"完成"按钮关闭
3. 删除键图标使用远程 CDN 地址
4. 远程回填使用 uni.request，兼容多端
5. script 引入时需先引入 Vue
6. 纯 HTML 环境无需引入 zb-plate-keyboard.css（组件自动注入 vw 样式）
7. UniApp 环境需引入 zb-plate-keyboard.css（rpx 单位）
8. H5 环境已修复 hover 状态持续问题（使用媒体查询）
9. vw 转换公式：rpx / 750 * 100 vw（750rpx = 100vw）
10. 系统键盘自动转大写：输入字母自动转为大写，符合车牌号规范

常见问题

Q: 小程序中样式不生效？

A: 确保引入了 zb-plate-keyboard.css，小程序需要在 app.vue 或页面中引入：

import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Q: 纯 HTML 环境样式不生效？

A: 纯 HTML 环境不需要引入 zb-plate-keyboard.css，组件会自动注入 vw 单位样式。如果样式仍不生效，请检查：

1. Vue 是否正确引入（先于组件）
2. 浏览器控制台是否有错误

Q: UMD 引入后组件未注册？

A: 确保 Vue 先于组件引入，组件会自动检测 window.Vue 并注册。

Q: 如何修改键盘颜色？

A: 通过 theme prop 自定义颜色配置。

Q: 如何在 UniApp easycom 中使用？

A: 将组件放到 components/zb-plate-keyboard/ 目录，命名为 zb-plate-keyboard.vue。

Q: 微信小程序 / 支付宝小程序里为什么会解析到 dist/zb-plate-keyboard.es？

A: 这通常说明当前项目是通过“包根入口”在注册组件，例如：

import ZbPlateKeyboard from 'zb-plate-keyboard'

在 uni-app 小程序编译场景里，这种写法可能让编译器直接回退到 npm 包的 module 入口，最终把组件路径解析成：

/node-modules/zb-plate-keyboard/dist/zb-plate-keyboard.es

修复方式：改为显式引入小程序静态组件入口。

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'
import 'zb-plate-keyboard/dist/zb-plate-keyboard.css'

Q: 报错 component not found 怎么办？

A: 先按下面顺序排查：

1. 确认使用的是新版本 npm 包，且包内存在：

node_modules/zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue

2. 确认项目里不是旧缓存：删除 unpackage/ 后重新编译。

3. 确认引入路径没有写成：

import ZbPlateKeyboard from 'zb-plate-keyboard/dist/zb-plate-keyboard.es.js'

正确写法是：

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'

Q: 报错 暂不支持动态组件[undefined] 怎么办？

A: 这是小程序编译器不支持动态组件造成的。旧版组件模板里如果存在：

<component :is="tagName('view')">

就可能在编译微信小程序、支付宝小程序时失败。

当前包已经为 uni-app 小程序提供了静态模板版入口：

zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue

所以只要改成显式引入这个 .vue 文件即可。

Q: easycom 为什么有时不生效？

A: easycom 对 npm 包的扫描和映射，和 uni-app / HBuilderX 版本有关，不同项目表现可能不一致。

当前包已经包含：

• package.json > easycom
• components/zb-plate-keyboard/zb-plate-keyboard.vue

但如果你的项目仍然没有自动识别，建议直接使用显式导入，不要继续依赖 easycom 自动发现：

import ZbPlateKeyboard from 'zb-plate-keyboard/components/zb-plate-keyboard/zb-plate-keyboard.vue'

Q: 纯 HTML + Vue2 会不会受小程序兼容改造影响？

A: 不会。

纯 HTML + Vue2 仍然使用 UMD 产物：

<script src="https://cdn.xxx.com/zb-plate-keyboard/zb-plate-keyboard.umd.js"></script>

这次新增的是 uni-app 小程序专用 .vue 入口，不影响原有 dist/zb-plate-keyboard.umd.js 的使用。

Q: H5 点击后按钮状态异常？

A: 已修复，使用 @media (hover: hover) 媒体查询，移动端不再有 hover 状态持续问题。

Q: vw 单位如何计算？

A: 转换公式：vw = rpx / 750 * 100，例如：

• 80rpx = 10.667vw
• 60rpx = 8vw
• 2rpx = 0.267vw

License

MIT