Адаптивный дизайн #

Выполнение Адаптивного дизайна в Windi CSS не требует усилий. Просто добавив префиксы вариантов, такие как md: или lg:, к утилите, которую вы хотите использовать. Соответствующий медиа-запрос будет сгенерирован автоматически. Попробуйте сами, используя игровую площадку ниже:

p-1 lg:p-2

{}

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

Если вы хотите применить вариант контрольной точки к нескольким утилитам, в Windi CSS вы можете сделать это, не повторяя себя, с помощью функции Группы вариантов.

xxxxxxxxxx

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  => больше или равно этой контрольной точке
<lg => меньше, чем эта контрольная точка
@lg => именно этот диапазон контрольных точек

xxxxxxxxxx

lg:p-1

<lg:p-2

@lg:p-3

{}

@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

import { defineConfig } from 'windicss/helpers'

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