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

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

p-1 lg:p-2

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

當(dāng)您想要將斷點(diǎn)變體應(yīng)用于多個(gè)實(shí)用程序時(shí)，在 Windi CSS 中，您可以使用變體組功能來(lái)實(shí)現(xiàn)而無(wú)需重復(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));
  }
}

自定義范圍

默認(rèn)情況下，Windi CSS 的斷點(diǎn)設(shè)計(jì)為移動(dòng)優(yōu)先。

這意味著不帶前綴的實(shí)用程序（如 p-1）對(duì)所有屏幕尺寸都有效，而帶前綴的實(shí)用程序（如 md:p-2）僅在指定的斷點(diǎn)及以上的斷點(diǎn)處生效。

我們還通過(guò)添加 < 和 @ 前綴提供了對(duì)查詢范圍進(jìn)行更多控制的能力：

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;
  }
}

斷點(diǎn)

定制化

您可以在 windi.config.js 中自定義斷點(diǎn)

?windi.config.js?

import { defineConfig } from 'windicss/helpers'

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