@sohu-bpd/utils

Frontend utility library for common development tasks.

Installation

npm install @sohu-bpd/utils
# or
pnpm add @sohu-bpd/utils
# or
yarn add @sohu-bpd/utils

Usage

ESM / CommonJS

import { px2vw, px2px } from '@sohu-bpd/utils'

// or
const { px2vw, px2px } = require('@sohu-bpd/utils')

Browser (IIFE)

<script src="https://unpkg.com/@sohu-bpd/utils/dist/index.global.js"></script>
<script>
  const { px2vw, px2px } = SohuUtils
</script>

API

px2vw

将设计稿的 px 值转换为 vw 单位字符串，适用于响应式布局。

function px2vw(
  px: number,
  designWidth?: number,
  unitPrecision?: number
): string

Parameters:

• px - 设计稿上的 px 值
• designWidth - 设计稿基准宽度，默认 750
• unitPrecision - 小数位精度，默认 5

Returns: vw 单位字符串，如 "13.33333vw"

Example:

import { px2vw } from '@sohu-bpd/utils'

// 基于 750px 设计稿
px2vw(100) // "13.33333vw"
px2vw(375) // "50vw"

// 基于 375px 设计稿
px2vw(100, 375) // "26.66667vw"

// 自定义精度
px2vw(100, 750, 2) // "13.33vw"

px2px

将设计稿的 px 值转换为当前屏幕的实际像素值，适用于 Canvas、动态计算等场景。

function px2px(px: number, designWidth?: number): number

Parameters:

• px - 设计稿上的 px 值
• designWidth - 设计稿基准宽度，默认 750

Returns: 实际像素值（number）

Example:

import { px2px } from '@sohu-bpd/utils'

// 假设当前屏幕宽度为 375px
px2px(100) // 50
px2px(750) // 375

// 基于 375px 设计稿
px2px(100, 375) // 100

TypeScript Support

This package is written in TypeScript and includes type definitions out of the box.

import type { } from '@sohu-bpd/utils'

// All functions are fully typed
const vwValue: string = px2vw(100)
const pxValue: number = px2px(100)

Bundle Formats

• ESM (.mjs) - Modern JavaScript modules
• CommonJS (.js) - Node.js and bundlers
• IIFE (.global.js) - Browser <script> tag with global SohuUtils

Changelog

0.0.2 (2026-01-29)

• Initial release with px2vw and px2px utilities
• Full TypeScript support
• Comprehensive unit tests and E2E tests
• Multiple bundle formats (ESM, CJS, IIFE)

License

MIT