Windi CSS 響應(yīng)式設(shè)計

在 Windi CSS 中進行響應(yīng)式設(shè)計毫不費力。只需將 md: 或 lg: 等變體前綴添加到您要使用的實用程序，就會自動生成相應(yīng)的媒體查詢。使用下面的 playground 自己嘗試：

p-1 lg:p-2

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

當您想要將斷點變體應(yīng)用于多個實用程序時，在 Windi CSS 中，您可以使用變體組功能來實現(xiàn)而無需重復(fù)自己。

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 的斷點設(shè)計為移動優(yōu)先。

這意味著不帶前綴的實用程序（如 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',
    },
  },
})