Windi CSS 响应式设计

在 Windi CSS 中进行响应式设计毫不费力。只需将 md: 或 lg: 等变体前缀添加到您要使用的实用程序，就会自动生成相应的媒体查询。使用下面的 playground 自己尝试：

p-1 lg:p-2

.p-1 {
  padding: 0.25rem;
}
@media (min-width: 1024px) {
  .lg\:p-2 {
    padding: 0.5rem;
  }
}

当您想要将断点变体应用于多个实用程序时，在 Windi CSS 中，您可以使用变体组功能来实现而无需重复自己。

p-1 lg:(p-2 m-2 text-red-400)

.p-1 {
  padding: 0.25rem;
}
@media (min-width: 1024px) {
  .lg\:m-2 {
    margin: 0.5rem;
  }
  .lg\:p-2 {
    padding: 0.5rem;
  }
  .lg\:text-red-400 {
    --tw-text-opacity: 1;
    color: rgba(248, 113, 113, var(--tw-text-opacity));
  }
}

自定义范围

默认情况下，Windi CSS 的断点设计为移动优先。

这意味着不带前缀的实用程序（如 p-1）对所有屏幕尺寸都有效，而带前缀的实用程序（如 md:p-2）仅在指定的断点及以上的断点处生效。

我们还通过添加 < 和 @ 前缀提供了对查询范围进行更多控制的能力：

lg  => equal to and greater than this breakpoint
<lg => smaller than this breakpoint
@lg => exactly this breakpoint range

lg:p-1
<lg:p-2
@lg:p-3

CSS

@media (min-width: 1024px) {
  .lg\:p-1 {
    padding: 0.25rem;
  }
}
@media (min-width: 1024px) and (max-width: 1279.9px) {
  .\@lg\:p-3 {
    padding: 0.75rem;
  }
}
@media (max-width: 1023.9px) {
  .\<lg\:p-2 {
    padding: 0.5rem;
  }
}

断点

定制化

您可以在 windi.config.js 中自定义断点

​windi.config.js​

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  theme: {
    screens: {
      tablet: '640px',
      laptop: '1024px',
      desktop: '1280px',
    },
  },
})