Windi CSS响应式设计
在 Windi CSS 中，可以很轻松实现 响应式设计。只需要将可变修饰（variant）的前缀加到对应的工具类前，比如 md:、lg:。对应的媒体查询会自动生成。实现方式如下：
CSS
当你想把断点可变修饰加到多个工具类上时，在 Windi CSS 中你可以通过使用 可变修饰组 特性来实现，而不需要重复编写。
CSS
自定义范围
默认情况下，Windi CSS 的断点被设计为移动端优先。
这就意味着没有前缀的工具类（比如：p-1） 作用在所有尺寸的屏幕上，而带有前缀的工具类（比如：md:p-2）只在指定断点及以上尺寸起作用。
我们还添加通过 < 和 @ 前缀的方式，提供了超过查询范围的情况下的更多控制能力。
lg => greater or equal than this breakpoint
<lg => smaller than this breakpoint
@lg => exactly this breakpoint range
CSS
断点
| 默认 | 带有 < 前缀 | 带有 @ 前缀 | |
|---|---|---|---|
| sm | (min-width: 640px) | (max-width: 639.9px) | (min-width: 640px) and (max-width: 767.9px) |
| md | (min-width: 768px) | (max-width: 767.9px) | (min-width: 768px) and (max-width: 1023.9px) |
| lg | (min-width: 1024px) | (max-width: 1023.9px) | (min-width: 1024px) and (max-width: 1279.9px) |
| xl | (min-width: 1280px) | (max-width: 1279.9px) | (min-width: 1280px) and (max-width: 1535.9px) |
| 2xl | (min-width: 1536px) | (max-width: 1535.9px) | (min-width: 1536px) |
自定义
你可以在你的 windi.config.js 中自定义断点。
windi.config.js
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
theme: {
screens: {
tablet: '640px',
laptop: '1024px',
desktop: '1280px',
},
},
})