1、废话介绍
UnoCSS 是由 Windi CSS 的一名团队成员发起的，从我们在 Windi CSS 中所做的工作中汲取了很多灵感。虽然 Windi CSS 不再被积极维护（截至 2023 年 3 月），但你可以将 UnoCSS 视为 Windi CSS 的 "精神继承者"。 UnoCSS 继承了 Windi CSS 的按需特性，属性化模式、快捷方式、变体组、编译模式 等等。最重要的是，UnoCSS 是从头开始构建的，考虑到了最大的可扩展性和性能，使我们能够引入 纯 CSS 图标、无值的属性化、标签化、网络字体 等新功能。
unibest 是最好的 uniapp 开发框架，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode(可选 webstorm) + uni插件+ wot-ui（可选其他 UI 库）构建，集成了多种工具和技术，使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式即可运行 web、小程序 和 App。（注：App 还是需要 HBuilderX）
unibest 内置了 约定式路由、layout布局、请求封装、请求拦截、登录拦截、UnoCSS、i18n多语言 等基础功能，提供了 代码提示、自动格式化、统一配置、代码片段 等辅助功能，让你编写 uniapp 拥有 best 体验 （ unibest 的由来）。
unibest目前支持H5、小程序和App。
2、UnoCSS / unibest
本篇主要介绍 UnoCSS 的使用，以及如何与 设计稿尺寸 对应。 UnoCSS 是按需使用的原子 CSS 引擎，提供了良好的样式支持。
3、安装插件
请安装 VSCode 插件 antfu.unocss
安装完成后在 VSCode 中还可以预览，
如果不记得原子类，可以查 UnoCSS 的原子类，UnoCSS Interactive
也可以查看 tailwindcss 的原子类，更加清晰明了，链接 - tailwindcss
4、设计稿尺寸
不同的编写方式，需要设置不同的设计稿尺寸，请看下文：
4.1、传统编写方式
如果有设计稿，通常使用传统的编写 CSS 的方式，里面的对应尺寸规律如下。以蓝湖为例，假如设计稿宽度为 750px，则直接复制样式代码到 css 代码，同时把 px 批量替换为 rpx 即可。
如果设计稿不是 750px 可以调整蓝湖的设置，让设计稿宽度为 750px。
下面为一段辅助说明文案，从
uniapp官网搬运而来。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之，页面元素宽度在 uni-app 中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：
若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。
4.2、UnoCSS 编写方式
经过上一节的 unocss.config.ts 配置，可以得到下面的组合：
mp 里面：mt-4 => margin-top: 32rpx == 16px
h5 里面：mt-4 => margin-top: 1rem == 16px
我们还是把设计稿设置为 750，设计稿上多少 px 的元素，写成多少 rpx 即可。
元素 A 在设计稿上的宽度为 100px，则写 w-100rpx 即可。
就是把 传统编写方式 中写在 css 中的样式搬到了 UnoCSS 中。
如果要想用 w-100 这种方式，需要做额外的处理（）：
5、使用指南
写法可以参考 tailwindcss
太忙了，有空再写吧。
总结
本文主要介绍了 UnoCSS 的使用，以及 unocss.config.ts 中的一些配置项。
同时说明了设计稿在两种编写方式下的宽度的设置，分别为 750 和 1500.
最后说明一下，原子化CSS 和 传统方式 两者不是互斥的，他们是互补的，合适的地方使用合适的方式。