Gathering detailed insights and metrics for postcss-pxtransform
Gathering detailed insights and metrics for postcss-pxtransform
Gathering detailed insights and metrics for postcss-pxtransform
Gathering detailed insights and metrics for postcss-pxtransform
开放式跨端跨框架解决方案,支持使用 React/Vue 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
npm install postcss-pxtransform
Typescript
Module System
Min. Node Version
Node Version
NPM Version
81.9
Supply Chain
100
Quality
96.7
Maintenance
100
Vulnerability
88
License
chore(release): publish 4.1.4
Updated on Jul 11, 2025
chore(release): publish 4.1.3
Updated on Jun 30, 2025
chore(release): publish 4.1.2
Updated on Jun 05, 2025
chore(release): publish 4.1.1
Updated on May 18, 2025
feat(harmony): update runtime hooks & runtime
Updated on May 18, 2025
chore(release): publish 4.1.0
Updated on May 16, 2025
TypeScript (55.6%)
JavaScript (39.81%)
SCSS (2.3%)
Rust (1.91%)
HTML (0.19%)
CSS (0.18%)
Vue (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
NOASSERTION License
36,678 Stars
14,244 Commits
4,848 Forks
689 Watchers
135 Branches
601 Contributors
Updated on Jul 11, 2025
Latest Version
4.1.4
Package Id
postcss-pxtransform@4.1.4
Unpacked Size
24.45 kB
Size
7.49 kB
File Count
7
NPM Version
10.8.2
Node Version
18.20.8
Published on
Jul 11, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
PostCSS 单位转换插件,目前已支持小程序端(px 转rpx),H5 端(px 转 rem)及 RN 端。
基于 postcss-pxtorem。
1$ npm install postcss-pxtransform --save-dev
1options = { 2 platform: 'weapp', 3 designWidth: 750, 4}
1options = {
2 platform: 'h5',
3 designWidth: 750,
4}
1options = { 2 platform: 'rn', 3 designWidth: 750, 4}
基础组件库一般是375
,如果业务系统UI设计是750
,可以如下配置后1:1
切图,小程序、H5、RN时有效
1options = { 2 platform: 'h5', 3 designWidth (input) { 4 if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1) { 5 return 375 6 } 7 return 750 8 }, 9}
默认配置下,所有的 px 都会被转换。
1/* input */ 2h1 { 3 margin: 0 0 20px; 4 font-size: 32px; 5 line-height: 1.2; 6 letter-spacing: 1px; 7} 8 9/* weapp output */ 10h1 { 11 margin: 0 0 20rpx; 12 font-size: 32rpx; 13 line-height: 1.2; 14 letter-spacing: 1rpx; 15} 16 17/* h5 output */ 18h1 { 19 margin: 0 0 0.5rem; 20 font-size: 1rem; 21 line-height: 1.2; 22 letter-spacing: 0.025rem; 23} 24 25/* rn output */ 26h1 { 27 margin: 0 0 10px; 28 font-size: 16px; 29 line-height: 1.2; 30 letter-spacing: 0.5px; 31} 32
1var fs = require('fs'); 2var postcss = require('postcss'); 3var pxtorem = require('postcss-pxtransform'); 4var css = fs.readFileSync('main.css', 'utf8'); 5var options = { 6 replace: false 7}; 8var processedCss = postcss(pxtorem(options)).process(css).css; 9 10fs.writeFile('main-rem.css', processedCss, function (err) { 11 if (err) { 12 throw err; 13 } 14 console.log('Rem file written.'); 15});
参数默认值如下:
1{ 2 unitPrecision: 5, 3 propList: ['*'], 4 selectorBlackList: [], 5 replace: true, 6 mediaQuery: false, 7 minPixelValue: 0 8}
Type: Object | Null
platform
(String)(必填)weapp
或 h5
或 rn
designWidth
(Number|Function)(必填)640
或 750
或 828
unitPrecision
(Number)The decimal numbers to allow the REM units to grow to.
propList
(Array)The properties that can change from px to rem.
*
to enable all properties. Example: ['*']
*
at the start or end of a word. (['*position*']
will match background-position-y
)!
to not match a property. Example: ['*', '!letter-spacing']
['*', '!font*']
selectorBlackList
(Array) The selectors to ignore and leave as px.
['body']
will match .body-class
[/^body$/]
will match body
but not .body
replace
(Boolean)replaces rules containing rems instead of adding fallbacks.
mediaQuery
(Boolean)Allow px to be converted in media queries.
minPixelValue
(Number)Set the minimum pixel value to replace.
当前忽略单个属性的最简单的方法,就是 px 单位使用大写字母。
1 /*`px` is converted to `rem`*/ 2.convert { 3 font-size: 16px; // converted to 1rem 4} 5 6 /* `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers*/ 7.ignore { 8 border: 1Px solid; // ignored 9 border-width: 2PX; // ignored 10}
对于头部包含注释/*postcss-pxtransform disable*/
的文件,插件不予处理。
/*postcss-pxtransform rn eject enable*/
与 /*postcss-pxtransform rn eject disable*/
中间的代码,
在编译成 RN 端的样式的时候,会被删除。建议将 RN 不支持的但 H5 端又必不可少的样式放到这里面。如:样式重制相关的代码。
1/*postcss-pxtransform rn eject enable*/ 2 3.test { 4 color: black; 5} 6 7/*postcss-pxtransform rn eject disable*/
No vulnerabilities found.
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
all changesets reviewed
Reason
security policy file detected
Details
Reason
no dangerous workflow patterns detected
Reason
packaging workflow detected
Details
Reason
license file detected
Details
Reason
binaries present in source code
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
128 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More