
Product
Announcing Socket Fix 2.0
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
postcss-design-px-to-rpx
Advanced tools
A CSS post-processor that converts px to uni-app units (rpx, upx).
A plugin for PostCSS that generates uniapp units (rpx) from pixel units.
.logo {
height: 200DP;
width: 200DP;
margin: 200DP auto 50px auto;
font-size: calc(16DP * var(--convert-rate));
}
app-plus
.logo{
height:110.4rpx;
width:110.4rpx;
margin:110.4rpx auto 50px auto;
font-size:calc(8.832rpx * var(--convert-rate))
}
mp-weixin:
.logo{
height:110.4rpx;
width:110.4rpx;
margin:110.4rpx auto 50px auto;
font-size:calc(8.832rpx * var(--convert-rate))
}
h5:
.logo[data-v-70604de4]{
height:%?110.4?%;width:%?110.4?%;
margin:%?110.4?% auto 50px auto;
font-size:calc(%?8.832?% * var(--convert-rate))
}
Add via npm
$ npm install postcss-design-px-to-rpx --save-dev
or yarn
$ yarn add -D postcss-design-px-to-rpx
Default Options:
{
unitToConvert: 'DP',
viewportWidth: 414,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'rpx',
fontViewportUnit: 'rpx',
selectorBlackList: [],
exclude: undefined,
include: undefined
}
unitToConvert
(String) unit to convert, by default, it is DP.viewportWidth
(Number) The width of the viewport.unitPrecision
(Number) The decimal numbers to allow the vw units to grow to.propList
(Array) The properties that can change from px to vw.
viewportUnit
(String) Expected units.fontViewportUnit
(String) Expected units for font.selectorBlackList
(Array) The selectors to ignore and leave as px.
['body']
will match .body-class
[/^body$/]
will match body
but not .body
exclude
(Regexp or Array of Regexp) Ignore some files like 'node_modules'
include
(Regexp or Array of Regexp) If include
is set, only matching files will be converted,
for example, only files under src/mobile/
(include: /\/src\/mobile\//
)
exclude
andinclude
can be set together, and the intersection of the two rules will be taken.
add to your postcss.config.js
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
// 必须在'postcss-dp-to-rpx‘之前
require('postcss-dp-to-rpx')({
unitToConvert: "DP",
viewportWidth: 414,
viewportUnit: "rpx"
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),
]
}
FAQs
A CSS post-processor that converts px to uni-app units (rpx, upx).
The npm package postcss-design-px-to-rpx receives a total of 2 weekly downloads. As such, postcss-design-px-to-rpx popularity was classified as not popular.
We found that postcss-design-px-to-rpx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.