@reaf-toolkit/postcss-px-to-viewport
v0.0.2
Published
A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
Downloads
2
Maintainers
Readme
@reaf-toolkit/postcss-px-to-viewport
将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.
简介
如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你 CSS 中的 px 单位转化为 vw,1vw 等于 1/100 视口宽度。
输入
.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 {
padding-top: 10px; /* px-to-viewport-ignore */
/* px-to-viewport-ignore-next */
padding-bottom: 10px;
/* Any other comment */
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
输出
.class {
margin: -3.125vw 0.5vh;
padding: 5vmin 2.96875vw 1px;
border: 0.9375vw solid black;
border-bottom-width: 1px;
font-size: 4.375vw;
line-height: 6.25vw;
}
.class2 {
padding-top: 10px;
padding-bottom: 10px;
/* Any other comment */
border: 1px solid black;
margin-bottom: 1px;
font-size: 6.25vw;
line-height: 9.375vw;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
上手
安装
使用 npm 安装
$ npm install @reaf-toolkit/postcss-px-to-viewport --save-dev
或者使用 yarn 进行安装
$ yarn add -D @reaf-toolkit/postcss-px-to-viewport
配置参数
默认参数:
{
unitToConvert: "px",
viewportWidth: 320,
viewportHeight: 568,
unitPrecision: 5,
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
propList: ["*"],
minPixelValue: 1,
mediaQuery: false,
replace: true,
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
}
interface IOptions {
/** 转换单位 */
unitToConvert?: string;
/** viewport宽,可根据文件自定义 */
viewportWidth?: ((file: string) => number) | number;
/** viewport高 */
viewportHeight?: number;
/** 小数点 */
unitPrecision?: number;
/** viewport单位 */
viewportUnit?: string;
/** 字体单位 */
fontViewportUnit?: string;
/** 黑名单 */
selectorBlackList?: string[];
/** 属性列表 */
propList?: string[];
/** 最小转换单位 */
minPixelValue?: number;
/** 是否开启媒体查询 */
mediaQuery?: boolean;
/** 是否直接更换属性值,而不添加备用属性 */
replace?: boolean;
/** 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) */
landscape?: boolean;
/** 横屏时使用的单位 */
landscapeUnit?: string;
/** 横屏时使用的视口宽度 */
landscapeWidth?: number;
/** 根据文件自定义单位替换 */
createPxReplace?: (
file: string,
pixels: number,
toFixed?: (number: number, precision: number) => number,
unitPrecision?: number
) => string;
/** 排除文件 */
exclude?: RegExp | RegExp[];
/** 包含文件 */
include?: RegExp | RegExp[];
}
Ignoring
You can use special comments for ignore conversion of single lines:
/* px-to-viewport-ignore-next */
— on a separate line, prevents conversion on the next line./* px-to-viewport-ignore */
— after the property on the right, prevents conversion on the same line.
Example:
/* example input: */
.class {
/* px-to-viewport-ignore-next */
width: 10px;
padding: 10px;
height: 10px; /* px-to-viewport-ignore */
border: solid 2px #000; /* px-to-viewport-ignore */
}
/* example output: */
.class {
width: 10px;
padding: 3.125vw;
height: 10px;
border: solid 2px #000;
}
There are several more reasons why your pixels may not convert, the following options may affect this:
propList
, selectorBlackList
, minPixelValue
, mediaQuery
, exclude
, include
.
使用 PostCss 配置文件时
在postcss.config.js
添加如下配置
module.exports = {
plugins: {
// ...
"@reaf-toolkit/postcss-px-to-viewport": {
// options
},
},
};
借鉴自
- https://github.com/evrone/postcss-px-to-viewport