Responsive Web Design

aj-geddes/useful-ai-prompts/skills/responsive-web-design

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Create responsive layouts using CSS Grid, Flexbox, media queries, and mobile-first design. Use when building adaptive interfaces that work across all devices.

仅含说明Software DevelopmentDesign & Creative
AI 生成的概览

指导使用 CSS Grid、Flexbox、媒体查询和排版构建移动优先的响应式网页布局。

功能
提供参考指南和组件模板，用于创建响应式网页界面。内容涵盖移动优先媒体查询策略、Flexbox 导航、CSS Grid 布局、响应式排版和卡片组件。材料以教学为主，包含 CSS 示例和一个 TSX 组件模板。
适用场景
适用于构建需要跨设备运行的适配界面，包括多设备应用、移动优先开发、无障碍布局和灵活 UI 系统。
运行要求
无脚本或运行时依赖；附带参考 Markdown 文件和一个 TSX 组件模板。

Responsive Web Design

Table of Contents

Overview

Build mobile-first responsive interfaces using modern CSS techniques including Flexbox, Grid, and media queries to create adaptable user experiences.

When to Use

  • Multi-device applications
  • Mobile-first development
  • Accessible layouts
  • Flexible UI systems
  • Cross-browser compatibility

Quick Start

Minimal working example:

css
/* Mobile styles (default) */.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;}
/* Tablet (640px and up) */@media (min-width: 640px) {  .container {    flex-direction: row;// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

GuideContents
Mobile-First Media Query Strategy [blocked]Mobile-First Media Query Strategy
Flexbox Responsive Navigation [blocked]Flexbox Responsive Navigation
CSS Grid Responsive Layout [blocked]CSS Grid Responsive Layout
Responsive Typography [blocked]Responsive Typography
Responsive Cards Component [blocked]Responsive Cards Component

Best Practices

✅ DO

  • Follow established patterns and conventions
  • Write clean, maintainable code
  • Add appropriate documentation
  • Test thoroughly before deploying

❌ DON'T

  • Skip testing or validation
  • Ignore error handling
  • Hard-code configuration values

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/responsive-web-design提交3f5182c

许可证： 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

aj-geddes

Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.

待分类3557个月前更新

Wireframe Prototyping

aj-geddes

Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.

待分类3557个月前更新

Web Performance Optimization

aj-geddes

通过代码分割、懒加载、缓存、压缩和监控来指导 Web 性能优化。

Software Development3557个月前更新

Vue Application Structure

aj-geddes

指导使用组合式 API、组件组织与 TypeScript 来构建 Vue 3 应用结构。

Software Development3557个月前更新

Visual Regression Testing

aj-geddes

通过跨版本比较截图来检测 UI 中非预期的视觉变化，指导视觉回归测试。

Software Development3557个月前更新

User Persona Creation

aj-geddes

基于研究创建详细的用户画像，用于指导产品设计、优先级排序与信息传达。

Research & Analysis3557个月前更新

更多Software Development技能

Playground

anthropics

精选

构建自包含的交互式 HTML 演练场，包含控件、实时预览和可复制的提示词输出。

Software Development37K今天更新

M5 Onboard

anthropics

精选

通过 USB 检测 M5Stack ESP32 开发板，刷写 UIFlow 2.0 固件并安装 MicroPython 应用包。

Software Development37K今天更新

Cardputer Buddy

anthropics

精选

指导迭代 Cardputer-Adv 的 MicroPython 应用包：添加应用、通过 USB 串口推送文件、查看日志并运行 REPL 命令。

Software Development37K今天更新

Web Design Guidelines

vercel-labs

精选

依据从远程来源获取的 Web Interface Guidelines 审查 UI 代码，并以 file:line 形式报告问题。

Software Development32K5周前更新

Vercel React Native Skills

vercel-labs

精选

React Native 与 Expo 最佳实践规则，涵盖列表性能、动画、导航、UI 模式、状态与 monorepo 配置。

Software Development32K5周前更新

Vercel React Best Practices

vercel-labs

精选

Vercel 的 React 与 Next.js 性能指南，以 70 条规则的形式用于编写、审查和重构代码。

Software Development32K5周前更新