Windi CSS 响应式设计

2023-02-16 17:58 更新

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

断点

Default < prefixed @ prefixed
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',
    },
  },
})


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号