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

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

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

Пользовательский диапазон #

По умолчанию контрольные точки Windi CSS разработаны как Сначала Мобильный.

Это означает, что служебные программы без префикса (например, p-1) действуют на всех размерах экрана, в то время как служебные программы с префиксом (например, md:p-2) действуют только при указанной контрольной точке и выше.

Мы также предоставили возможность иметь больше контроля над диапазоном запросов, добавив префиксы < и @:

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

Контрольные точки #

Настройка #

Вы можете настроить контрольные точки в файле windi.config.js

import { defineConfig } from 'windicss/helpers'

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