unocss响应式配置

### Unocss中的响应式设计配置

在 UnoCSS 中实现响应式设计主要依赖于内置的响应式规则。这些规则允许开发者通过简单的类名来定义不同屏幕尺寸下的样式变化[^1]。

对于响应式的处理，UnoCSS 支持多种方式：

#### 方法一：使用预设断点

可以通过添加带有 `@` 符号的前缀到任何原子类上来指定媒体查询条件。例如，在宽度大于等于768px时应用某个边距，则可以这样写：

<div class="m-4 @md:m-8"></div>

这里 `@md:` 表示当视口达到中等大小（通常指平板电脑及以上设备）时生效。完整的断点列表可以在项目的文档中找到，并且可以根据需求自定义设置。

#### 方法二：利用环境变量

另一种做法是在项目根目录下创建 `.env` 文件并定义好所需的断点名称及其对应的最小宽度值。之后便可以直接调用这些已命名好的断点来进行布局调整：

UNOCSS_BREAKPOINTS_sm=640
UNOCSS_BREAKPOINTS_md=768
UNOCSS_BREAKPOINTS_lg=1024
UNOCSS_BREAKPOINTS_xl=1280

接着就可以像下面这样编写 HTML 结构了：

<!-- 当窗口宽度过窄时不显示 -->
<div class="@sm:hidden block">仅限大屏可见</div>

<!-- 小型设备上为红色；大型及以上变为蓝色 -->
<button class="text-red-500 @lg:text-blue-500">
    变色按钮
</button>

以上两种途径都可以很好地满足日常开发过程中遇到的各种场景需求。值得注意的是，在实际操作之前建议先阅读官方指南以获取最新最全的信息[^3]。