在 Windi CSS 中,可以很轻松实现 响应式设计。只需要将可变修饰(variant)的前缀加到对应的工具类前,比如 md:
、lg:
。对应的媒体查询会自动生成。实现方式如下:
当你想把断点可变修饰加到多个工具类上时,在 Windi 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
默认 | 带有 < 前缀 | 带有 @ 前缀 | |
---|---|---|---|
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
中自定义断点。
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
theme: {
screens: {
tablet: '640px',
laptop: '1024px',
desktop: '1280px',
},
},
})