القائمة
响应式断点与移动端适配规范，覆盖导航折叠、卡片网格、表单布局
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
生成完成后，检查代码是否符合基础质量指标
验证生成的页面在 4 个断点下的布局是否正常
生成前主动采集用户提供的参考图片或网页的设计风格，提取配色/布局/字体
API 调用模式最佳实践，包括列表查询、表单提交、数据删除等场景的异步处理规范
CSS 变量与设计 Token 体系规范，确保视觉一致性
表单校验的完整实现规范，适用于所有包含表单的页面
| name | responsive-breakpoints |
| description | 响应式断点与移动端适配规范，覆盖导航折叠、卡片网格、表单布局 |
所有需要适配桌面/平板/手机的页面，尤其是导航栏、卡片网格、表单布局
| 断点 | 宽度 | 目标设备 |
|---|---|---|
| xs | < 576px | 手机竖屏 |
| sm | ≥ 576px | 手机横屏 |
| md | ≥ 768px | 平板 |
| lg | ≥ 992px | 桌面窄 |
| xl | ≥ 1200px | 桌面宽 |
/* 移动端优先 */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
matchMedia('(max-width: 768px)') 监听断点变化const isMobile = ref(window.matchMedia('(max-width: 768px)').matches)
const mql = window.matchMedia('(max-width: 768px)')
mql.addEventListener('change', (e) => { isMobile.value = e.matches })
<a-row :gutter="[16, 16]">
<a-col :xs="24" :sm="12" :lg="8" :xl="6">
<!-- 卡片内容 -->
</a-col>
</a-row>