Frontend Responsive Design Standards by am-will/codex-skills
npx skills add https://github.com/am-will/codex-skills --skill 'Frontend Responsive Design Standards'规则: 采用移动优先的开发方式,使用一致的断点、流式布局、相对单位以及便于触摸操作的目标尺寸。
此技能为 Codex 提供了关于如何遵守与前端响应式处理相关的编码标准的具体指导。
始终从移动端布局开始,然后为更大的屏幕进行增强。
不良做法(桌面优先):
.container {
width: 1200px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.container {
width: 100%;
grid-template-columns: 1fr;
}
}
良好做法(移动优先):
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
max-width: 1200px;
grid-template-columns: repeat(4, 1fr);
}
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
为何采用移动优先:
识别并一致地使用项目断点:
常见的断点系统:
Tailwind:
sm: 640px (小型平板电脑)
md: 768px (平板电脑)
lg: 1024px (笔记本电脑)
xl: 1280px (台式机)
2xl: 1536px (大型台式机)
Bootstrap:
sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px
在创建新断点之前,请检查现有代码库中的断点定义。
用法(Tailwind):
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
用法(CSS):
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
除非明确要求,否则切勿使用像 850px 或 1150px 这样的任意断点。
使用能适应屏幕尺寸的灵活容器:
不良做法(固定宽度):
.container { width: 1200px; }
.sidebar { width: 300px; }
.content { width: 900px; }
良好做法(流式):
.container {
width: 100%;
max-width: 1200px;
padding: 0 1rem;
}
.layout {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.layout {
grid-template-columns: 300px 1fr;
}
}
流式布局模式:
flex: 1、flex-grow、flex-shrink1fr、minmax()、auto-fit、auto-fillwidth: 100%、max-width: 1200px@container (min-width: 400px)使用 rem/em 以实现可扩展性和可访问性:
不良做法:
font-size: 16px;
padding: 20px;
margin: 10px;
border-radius: 8px;
良好做法:
font-size: 1rem; /* 16px 基准 */
padding: 1.25rem; /* 20px */
margin: 0.625rem; /* 10px */
border-radius: 0.5rem; /* 8px */
何时使用每种单位:
rem:字体大小、间距、布局尺寸(随根字体大小缩放)em:组件相对尺寸(随父级字体大小缩放)%:相对于父级的宽度、高度px:边框(1px)、阴影、非常小的值vw/vh:完整视口尺寸、英雄区域ch:基于文本的宽度(例如,max-width: 65ch 用于可读的行长)框架工具会自动处理此问题:
<div className="text-base p-5 m-2.5 rounded-lg">
最小触摸目标尺寸:44x44px(iOS)/ 48x48px(Android)
不良做法:
.icon-button {
width: 24px;
height: 24px;
}
良好做法:
.icon-button {
width: 24px;
height: 24px;
padding: 12px; /* 总计:48x48px */
/* 或使用 min-width/min-height */
min-width: 44px;
min-height: 44px;
}
触摸目标检查清单:
在不缩放的情况下保持可读的字体大小:
不良做法:
body { font-size: 12px; }
.small-text { font-size: 10px; }
良好做法:
body { font-size: 1rem; } /* 最小 16px */
.small-text { font-size: 0.875rem; } /* 最小 14px */
排版指南:
max-width: 65ch)响应式排版:
h1 {
font-size: 2rem;
}
@media (min-width: 768px) {
h1 {
font-size: 2.5rem;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 3rem;
}
}
或使用 clamp(流式):
h1 {
font-size: clamp(2rem, 5vw, 3rem);
}
首先显示最重要的内容,隐藏或折叠次要内容:
不良做法:
<div>
<Sidebar /> {/* 移动端显示完整侧边栏 */}
<MainContent />
</div>
良好做法:
<div className="flex flex-col lg:flex-row">
<MainContent className="order-1" />
<Sidebar className="order-2 hidden lg:block" />
</div>
策略:
order 属性重新排序内容根据设备尺寸提供合适的图像:
不良做法:
<img src="hero-4000x3000.jpg" alt="Hero">
良好做法:
<img
src="hero-800x600.jpg"
srcset="
hero-400x300.jpg 400w,
hero-800x600.jpg 800w,
hero-1600x1200.jpg 1600w
"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="Hero"
>
或使用现代格式:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero">
</picture>
特定框架:
// Next.js
<Image
src="/hero.jpg"
width={800}
height={600}
sizes="(max-width: 768px) 100vw, 50vw"
alt="Hero"
/>
在完成工作前,在关键断点验证布局:
测试检查清单:
测试方法:
需要检查的常见问题:
导航:
// 移动端:汉堡菜单
// 桌面端:水平导航
<nav className="lg:flex lg:items-center">
<button className="lg:hidden">菜单</button>
<ul className="hidden lg:flex lg:gap-4">
<li>首页</li>
<li>关于</li>
</ul>
</nav>
网格布局:
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
侧边栏布局:
.layout {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.layout {
flex-direction: row;
}
.sidebar { width: 300px; }
.content { flex: 1; }
}
完成响应式工作前:
| 情况 | 操作 |
|---|---|
| 开始新布局 | 从移动端(320-375px)开始 |
| 需要断点 | 使用项目标准(检查现有代码) |
| 设置宽度 | 使用 width: 100% + max-width |
| 设置字体大小 | 使用 rem(16px = 1rem) |
| 设置间距 | 使用 rem 或框架工具 |
| 按钮太小 | 确保最小 44x44px 并带有内边距 |
| 文字太小 | 正文最小 16px(1rem) |
| 测试布局 | 检查 375px、768px、1024px、1440px |
| 图像加载慢 | 使用 srcset 和现代格式 |
每周安装量
0
代码仓库
GitHub 星标数
495
首次出现
1970年1月1日
安全审计
Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.
This Skill provides Codex with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.
Always start with mobile layout, then enhance for larger screens.
Bad (desktop-first):
.container {
width: 1200px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.container {
width: 100%;
grid-template-columns: 1fr;
}
}
Good (mobile-first):
.container {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.container {
max-width: 1200px;
grid-template-columns: repeat(4, 1fr);
}
}
Why mobile-first:
Identify and use project breakpoints consistently:
Common breakpoint systems:
Tailwind:
sm: 640px (small tablets)
md: 768px (tablets)
lg: 1024px (laptops)
xl: 1280px (desktops)
2xl: 1536px (large desktops)
Bootstrap:
sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px
Check existing codebase for breakpoint definitions before creating new ones.
Usage (Tailwind):
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
Usage (CSS):
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
Never use arbitrary breakpoints like 850px or 1150px unless explicitly required.
Use flexible containers that adapt to screen size:
Bad (fixed widths):
.container { width: 1200px; }
.sidebar { width: 300px; }
.content { width: 900px; }
Good (fluid):
.container {
width: 100%;
max-width: 1200px;
padding: 0 1rem;
}
.layout {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.layout {
grid-template-columns: 300px 1fr;
}
}
Patterns for fluid layouts:
flex: 1, flex-grow, flex-shrink1fr, minmax(), auto-fit, auto-fillwidth: 100%, max-width: 1200px@container (min-width: 400px)Use rem/em for scalability and accessibility:
Bad:
font-size: 16px;
padding: 20px;
margin: 10px;
border-radius: 8px;
Good:
font-size: 1rem; /* 16px base */
padding: 1.25rem; /* 20px */
margin: 0.625rem; /* 10px */
border-radius: 0.5rem; /* 8px */
When to use each unit:
rem: Font sizes, spacing, layout dimensions (scales with root font size)em: Component-relative sizing (scales with parent font size)%: Widths, heights relative to parentpx: Borders (1px), shadows, very small valuesvw/vh: Full viewport dimensions, hero sectionsch: Text-based widths (e.g., max-width: 65ch for readable line length)Framework utilities handle this automatically:
<div className="text-base p-5 m-2.5 rounded-lg">
Minimum touch target size: 44x44px (iOS) / 48x48px (Android)
Bad:
.icon-button {
width: 24px;
height: 24px;
}
Good:
.icon-button {
width: 24px;
height: 24px;
padding: 12px; /* Total: 48x48px */
/* Or use min-width/min-height */
min-width: 44px;
min-height: 44px;
}
Touch target checklist:
Maintain readable font sizes without zoom:
Bad:
body { font-size: 12px; }
.small-text { font-size: 10px; }
Good:
body { font-size: 1rem; } /* 16px minimum */
.small-text { font-size: 0.875rem; } /* 14px minimum */
Typography guidelines:
max-width: 65ch)Responsive typography:
h1 {
font-size: 2rem;
}
@media (min-width: 768px) {
h1 {
font-size: 2.5rem;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 3rem;
}
}
Or with clamp (fluid):
h1 {
font-size: clamp(2rem, 5vw, 3rem);
}
Show most important content first, hide or collapse secondary content:
Bad:
<div>
<Sidebar /> {/* Full sidebar on mobile */}
<MainContent />
</div>
Good:
<div className="flex flex-col lg:flex-row">
<MainContent className="order-1" />
<Sidebar className="order-2 hidden lg:block" />
</div>
Strategies:
order property to reorder contentServe appropriate images for device size:
Bad:
<img src="hero-4000x3000.jpg" alt="Hero">
Good:
<img
src="hero-800x600.jpg"
srcset="
hero-400x300.jpg 400w,
hero-800x600.jpg 800w,
hero-1600x1200.jpg 1600w
"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
alt="Hero"
>
Or with modern formats:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero">
</picture>
Framework-specific:
// Next.js
<Image
src="/hero.jpg"
width={800}
height={600}
sizes="(max-width: 768px) 100vw, 50vw"
alt="Hero"
/>
Verify layouts at key breakpoints before completing work:
Test checklist:
Testing methods:
Common issues to check:
Navigation:
// Mobile: Hamburger menu
// Desktop: Horizontal nav
<nav className="lg:flex lg:items-center">
<button className="lg:hidden">Menu</button>
<ul className="hidden lg:flex lg:gap-4">
<li>Home</li>
<li>About</li>
</ul>
</nav>
Grid layouts:
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
Sidebar layouts:
.layout {
display: flex;
flex-direction: column;
}
@media (min-width: 1024px) {
.layout {
flex-direction: row;
}
.sidebar { width: 300px; }
.content { flex: 1; }
}
Before completing responsive work:
| Situation | Action |
|---|---|
| Starting new layout | Begin with mobile (320-375px) |
| Need breakpoint | Use project standard (check existing code) |
| Setting width | Use width: 100% + max-width |
| Setting font size | Use rem (16px = 1rem) |
| Setting spacing | Use rem or framework utilities |
| Button too small | Ensure min 44x44px with padding |
| Text too small | Minimum 16px (1rem) for body |
| Testing layout | Check 375px, 768px, 1024px, 1440px |
Weekly Installs
0
Repository
GitHub Stars
495
First Seen
Jan 1, 1970
Security Audits
Flutter布局指南:构建响应式UI的约束规则与自适应设计模式
1,200 周安装
| Images loading slow |
| Use srcset and modern formats |