Home

Awesome

postcss-bud

<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS" width="90" height="90" align="right">

一款 PostCSS 插件,用于保持视图横竖居中于屏幕。您可以查看在线范例以了解使用效果。

安装

npm 安装:

npm install --save-dev postcss postcss-bud

yarn 安装:

yarn add -D postcss postcss-bud
<details> <summary> 安装之后在 postcss.config.js 配置文件中引入,或者其它框架配置文件中引入。 </summary>
import dataScreen from 'postcss-bud' // <---- 这里
import autoprefixer from 'autoprefixer'
// 省略……
{
	postcss: {
		plugins: [
			autoprefixer(),
			dataScreen({ // <---- 这里
				rootSelector: '#app',
				viewport: {
					width: 1920,
					height: 1080,
				},
			}),
		],
	},
}
// 省略……
</details>

演示效果

下面的图片展示了使用本插件后,左右半屏,上下半屏,以及全屏下,视图始终居中的效果:

<table> <tr> <td><img src="./images/left-half.png" alt="移动端的展示效果" /></td> <td><img src="./images/top-half.png" alt="移动端横屏的展示效果" /></td> </tr> <tr> <td colspan="2"><img src="./images/maximize.png" alt="桌面端的展示效果" /></td> </tr> </table> <details> <summary> 查看动图,动图展示了拖拽窗口,视图始终居中的效果。 </summary> <img src="./images/bud.gif" alt="视图始终居中的效果" /> </details>

在“范例”一节查看,源码中提供了范例,用于在本地运行后验证演示效果,或者您也可以查看文档开头的在线范例。

配置参数

NameTypeisRequiredDefaultDesc
viewportnumber|(file: string, selector: string) => { width: number; height: number; }N750设计图宽度,可以传递函数动态生成设计图宽度,例如 file => file.includes("vant") ? { width: 777, height: 888, } : { width: 1920, height: 1080, } 表示在名称包含“vant”的文件内使用 777*888 的设计图尺寸
viewport.widthnumberN1920设计图宽度
viewport.heightnumberN1920设计图宽度
rootSelectorstringNnull根元素选择器,如果指定,则将制定选择器居中
unitPrecisionnumberN3精确到小数点后几位?
comment.varsstringNnull自定义注释,定义全局变量的注释名称,如果未指定,将判断是否设置根元素选择器,如果设置,全局变量定义在根选择器处,如果未设置,将定义在每个 css 文件开头
comment.ignorePrevstringNnull自定义注释,标记则不对当前行进行转换
excludeRegExp|RegExp[]Nnull排除文件或文件夹,哪些文件不需要转换?
includeRegExp|RegExp[]Nnull包括文件或文件夹,哪些文件需要转换?

下面是默认的配置参数:

{
  "viewport": {
    "width": 1920,
    "height": 1080,
  },
  "rootSelector": null,
  "unitPrecision": 3,
  "comment": {
    "vars": null,
    "ignorePrev": null,
  },
  "include": null,
  "exclude": null
}

单元测试

npm install
npm run test

范例

文件夹 example 内提供了分别在 React 中使用 postcss-bud 的范例,通过命令行进入对应的范例文件夹中,即可运行:

cd example/react/
npm install
npm run start

在“演示效果”一节中查看成功运行之后,不同屏幕尺寸的图片。

原理和输入输出

视图宽度:min(calc(100vh * viewportWidth / viewportHeight), 100vw)

视图高度:min(calc(100vw * viewportHeight / viewportWidth), 100vh)

输入:

.petal {
  width: 1920px;
  height: 540px;
}

.bud {
  width: 36px;
  height: 36px;
  position: fixed;
  bottom: 0;
  right: 0;
}

输出:

:root {
  --vW: min(calc(100vh * 1.778), 100vw); /* viewport width,min(calc(100vh * 1920 / 1080), 100vw) */
  --vH: min(calc(100vw * 0.563), 100vh); /* viewport height,min(calc(100vw * 1080 / 1920), 100vh) */
  --yE: calc(50% - var(--vH) / 2); /* column edge space */
  --xE: calc(50% - var(--vW) / 2); /* row edge space */
}

.petal {
  width : calc(var(--vW) * 1);
  height: calc(var(--vH) * 0.5);
}

.bud {
  width   : calc(var(--vW) * 0.019);
  height  : calc(var(--vH) * 0.033);
  position: fixed;
  bottom  : var(--yE);
  right   : var(--xE);
}

CHANGELOG

查看更新日志

版本规则

查看语义化版本 2.0.0

协议

查看 MIT License

其它

相关链接: