响应式设计

在 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',
    },
  },
})