必须将响应式断点统一设为375px以匹配Figma设计稿：检查并修改tailwind.config.js中sm断点为'375px'，确保viewport标签存在，用Codex批量替换媒体查询，并通过Safari模拟器验证临界点切换效果。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你在Mac上用Codex生成前端页面时，发现默认输出的响应式断点不匹配Figma设计稿里的375px移动端基线，导致预览时布局错位、字体挤在一起、按钮被截断——这不是代码写错了，而是断点没对齐设计源头。
确认当前项目是否启用移动优先策略
打开项目根目录下的src/styles.css或tailwind.config.js，检查是否存在@layer base或theme.extend.screens中定义了sm: '375px'。没有就说明项目仍沿用Bootstrap式断点（如sm: '640px'），必须手动重置。
若使用Tailwind，直接在tailwind.config.js里修改screens字段：把sm从'640px'改为'375px'，否则Codex后续生成的所有组件都将基于错误基线渲染。
【关键前提】必须确保index.html头部已声明<meta name="viewport" content="width=device-width, initial-scale=1">，否则375px断点在Safari中不会触发。
用Codex指令强制重写断点逻辑
在Codex任务输入框中粘贴以下指令：
“请读取当前CSS文件，定位所有@media规则。将所有min-width: 640px替换为min-width: 375px；所有max-width: 767px替换为max-width: 374px；保留原有样式块结构，不删减任何选择器。”
这一步不能靠人工逐行改——Codex会扫描整个样式表，包括node_modules引入的第三方组件CSS，避免漏掉隐藏断点。
执行后检查生成的diff：若出现@media (min-width: 375px) and (max-width: 767px)这类混合断点，说明原始代码存在冗余条件，需手动删掉and (max-width: 767px)部分，只留min-width: 375px——因为移动端基线应是“默认样式+向上增强”，不是“区间覆盖”。
验证375px断点是否真实生效
第一步：在Safari开发者工具中 → 切换设备模拟器 → 选「iPhone SE (2020)」→ 刷新页面。
通过 Codex CLI 生成图片，支持尺寸控制和批量模式。依赖：codex (npm)。代理默认启用。用 generate.sh 生成单张，batch_generate.sh 批量生成游戏 UI 素材，gen_size.sh 指定尺寸。所有输出保存至 ~/.codex/generated_images/。
第二步：右键任意容器 → 检查元素 → 在右侧Styles面板中搜索375px，确认对应媒体查询已加载且未被!important覆盖。
第三步：拖动窗口宽度至374px和375px临界点，观察导航栏是否在375px时从汉堡菜单切换为横排——若374px下仍是横排，说明断点未生效，需回退检查viewport标签是否缺失或被重复注入。
第四步：运行npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch（如用Tailwind），确认构建后CSS文件中@media (min-width: 375px)真实存在且无语法错误。
让Codex自动生成适配375px的组件代码
方法一：给Codex明确断点上下文
“请基于Figma设计稿（移动端宽度375px，平板768px，桌面1440px）生成一个响应式卡片列表。要求：默认单列（375px下），768px起双列，1440px起四列。使用Flexbox实现，禁止用固定px宽度，所有间距用rem单位。”
方法二：绑定设计系统变量
“当前项目已定义CSS变量：--breakpoint-mobile: 375px、--breakpoint-tablet: 768px。请生成导航栏组件，用@media (min-width: var(--breakpoint-mobile))控制显示逻辑，汉堡图标仅在375px以下显示。”
方法三：用注释锚定断点
在已有HTML文件中插入注释：<!-- codex: breakpoint=375px -->，然后发送任务：“请根据上方注释中的断点值，重写该区域的CSS，确保所有子元素在375px视口下正确堆叠。”
