响应式网页设计指南：使用Flexbox、Grid和媒体查询构建移动优先界面
responsive-web-design by aj-geddes/useful-ai-prompts
安装命令
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill responsive-web-design🇨🇳中文介绍
响应式网页设计
目录
- 概述
- 使用场景
- 快速开始
- 参考指南
- 最佳实践
概述
使用现代 CSS 技术（包括 Flexbox、Grid 和媒体查询）构建移动优先的响应式界面，以创建适应性强的用户体验。
使用场景
- 多设备应用程序
- 移动优先开发
- 可访问的布局
- 灵活的 UI 系统
- 跨浏览器兼容性
快速开始
最小工作示例：
/* 移动端样式（默认） */
.container {
display: flex;
flex-direction: column;
padding: 16px;
gap: 16px;
}
.card {
padding: 16px;
border-radius: 8px;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 平板电脑（640px 及以上） */
@media (min-width: 640px) {
.container {
flex-direction: row;
// ... (完整实现请参阅参考指南)
}
参考指南
references/ 目录下的详细实现：
| 指南 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
