如何在UnoCSS中使用max-width断点？自定义配置未生效问题

你配置的md:bg-pink未生效，核心是断点配置方式错误+冗余配置干扰，以下是修正方案：

1. 清理冗余配置 #

删掉theme下的screens配置项——UnoCSS的presetUno仅读取theme.breakpoints定义断点，多余的screens会引发配置冲突。

2. 正确配置max-width断点 #

修改breakpoints的配置逻辑，两种方式任选其一：

方式一：直接声明媒体查询字符串（直观简洁） #

export default defineConfig({
  shortcuts: [
    {...},
  ],
  rules: [],
  theme: {
    colors: {...},
    breakpoints: {
      // 直接将md定义为max-width:1800px的媒体查询
      md: '(max-width: 1800px)'
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
  ],
});

方式二：使用对象形式定义 #

export default defineConfig({
  shortcuts: [
    {...},
  ],
  rules: [],
  theme: {
    colors: {...},
    breakpoints: {
      md: { max: '1800px' }
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
  ],
});

3. 生效验证 #

配置完成后，md:bg-pink会在屏幕宽度≤1800px时触发，完全符合你用max-width替代默认min-width断点的需求。

如果仍未生效，建议：

• 重启开发服务器，确保UnoCSS配置热更新生效
• 打开浏览器开发者工具，检查元素样式面板中是否生成了正确的媒体查询规则

内容的提问来源于stack exchange，提问作者future