Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
postcss-px-to-viewport-plus
Advanced tools
A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
Readme
中文 | English
将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.
如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你 CSS 中的 px 单位转化为 vw,1vw 等于 1/100 视口宽度。
本插件基于 postcss-px-to-viewport
源代码修改,增加了一个参数 mediaConfig
({viewportWidth: Number,minWidth:Number,maxWidth:Number}[])
当 mediaQuery 为 true 时,媒体查询里的 CSS 根据配置中对应的 viewportWidth 转换,需要满足 0<=minWidth<=viewportWidth<=maxWidth<=Infinity。
// postcss.config.js
module.exports = {
plugins: {
"postcss-px-to-viewport-plus": {
viewportWidth: 375,
// viewportHeight: 667,
unitPrecision: 5,
viewportUnit: "vw",
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: true,
mediaConfig: [
{
viewportWidth: 600,
minWidth: 500,
maxWidth: 750,
},
{
viewportWidth: 900,
minWidth: 751,
maxWidth: 1024,
},
{
viewportWidth: 1920,
minWidth: 1025,
maxWidth: Infinity,
},
],
exclude: [/node_modules/],
},
},
};
.class {
margin: -10px 0.5vh;
padding: 5vmin 9.5px 1px;
border: 3px solid black;
border-bottom-width: 1px;
font-size: 14px;
line-height: 20px;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
@media (min-device-width: 500px) and (max-device-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
@media (min-width: 751px) and (max-width: 1024px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
@media (min-width: 1025px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
.class {
margin: -2.66667vw 0.5vh;
padding: 5vmin 2.53333vw 1px;
border: 0.8vw solid black;
border-bottom-width: 1px;
font-size: 3.73333vw;
line-height: 5.33333vw;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 5.33333vw;
line-height: 8vw;
}
@media (min-device-width: 500px) and (max-device-width: 750px) {
.class3 {
font-size: 2.66667vw;
line-height: 3.66667vw;
}
}
@media (min-width: 751px) and (max-width: 1024px) {
.class3 {
font-size: 1.77778vw;
line-height: 2.44444vw;
}
}
@media (min-width: 1025px) {
.class3 {
font-size: 0.83333vw;
line-height: 1.14583vw;
}
}
使用 npm 安装
$ npm install postcss-px-to-viewport-plus --save-dev
或者使用 yarn 进行安装
$ yarn add -D postcss-px-to-viewport-plus
默认参数:
{
unitToConvert: 'px',
viewportWidth: 320,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
mediaConfig:[],
replace: true,
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
unitToConvert
(String) 需要转换的单位,默认为"px"viewportWidth
(Number) 设计稿的视口宽度unitPrecision
(Number) 单位转换后保留的精度propList
(Array) 能转化为 vw 的属性列表
viewportUnit
(String) 希望使用的视口单位fontViewportUnit
(String) 字体使用的视口单位selectorBlackList
(Array) 需要忽略的 CSS 选择器,不会转为视口单位,使用原有的 px 等单位。
selectorBlackList
为 ['body']
的话, 那么 .body-class
就会被忽略selectorBlackList
为 [/^body$/]
, 那么 body
会被忽略,而 .body
不会minPixelValue
(Number) 设置最小的转换数值,如果为 1 的话,只有大于 1 的值会被转换mediaQuery
(Boolean) 媒体查询里的单位是否需要转换单位mediaConfig
({viewportWidth: Number,minWidth:Number,maxWidth:Number}[]) mediaQuery 为 true 时,媒体查询里的 CSS 根据配置中对应的 viewportWidth 转换,需要满足 0<=minWidth<=viewportWidth<=maxWidth<=Infinity。replace
(Boolean) 是否直接更换属性值,而不添加备用属性exclude
(Array or Regexp) 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
landscape
(Boolean) 是否添加根据 landscapeWidth
生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit
(String) 横屏时使用的单位landscapeWidth
(Number) 横屏时使用的视口宽度在 gulpfile.js
添加如下配置:
var gulp = require("gulp");
var postcss = require("gulp-postcss");
var pxtoviewport = require("postcss-px-to-viewport-plus");
gulp.task("css", function () {
var processors = [
pxtoviewport({
viewportWidth: 320,
viewportUnit: "vmin",
}),
];
return gulp
.src(["build/css/**/*.css"])
.pipe(postcss(processors))
.pipe(gulp.dest("build/css"));
});
在postcss.config.js
添加如下配置
module.exports = {
plugins: {
...
'postcss-px-to-viewport-plus': {
// options
}
}
}
为了跑测试案例, 你需要全局安装 jasmine-node
:
$ npm install jasmine-node -g
然后输入下面的命令:
$ npm run test
变更日志在 这.
在 contributors 里可以看到谁参与了本项目.
本项目使用 MIT License.
FAQs
A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
The npm package postcss-px-to-viewport-plus receives a total of 0 weekly downloads. As such, postcss-px-to-viewport-plus popularity was classified as not popular.
We found that postcss-px-to-viewport-plus demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.