mcpField
R
responsive-web-design

responsive-web-design

github.com/secondsky设计与 UI240695 次安装5 周前更新
代码仓库

关于 responsive-web-design

这项技能介绍使用现代 CSS 构建适配不同屏幕尺寸的界面，适合制作响应式网页的开发者。内容包括移动优先布局、灵活网格、流式排版、响应式图像和导航模式。

主要功能

  1. 01移动优先媒体查询
  2. 02灵活的 CSS Grid 布局
  3. 03使用 clamp() 实现流式排版
  4. 04响应式图像尺寸
  5. 05Flexbox 导航模式

适用场景

  1. 01为手机和平板宽度创建布局
  2. 02让标题随屏幕平滑缩放
  3. 03使图像适应容器尺寸
  4. 04调整导航以适应窄屏

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/secondsky/claude-skills --skill responsive-web-design

安装后在 Claude Code 中输入/responsive-web-design确认已加载。

详细介绍

响应式网页设计

运用现代 CSS 技术，构建适配各种屏幕尺寸的界面。

移动优先媒体查询

/* Base: Mobile (320px+) */
.container {
  padding: 1rem;
}

/* Tablet (640px+) */
@media (min-width: 640px) {
  .container {
    padding: 2rem;
    max-width: 640px;
    margin: 0 auto;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

灵活网格

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* Mobile: single column */
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
  }
}

流式排版

/* Scales smoothly between breakpoints */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

响应式图片

img {
  max-width: 100%;
  height: auto;
}

.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Flexbox 导航

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

最佳实践

  • 从移动端样式开始
  • 使用灵活单位（%、rem、vw）
  • 在真实设备上测试
  • 确保触控目标至少为 48px
  • 保持易读的行长（45-75 个字符）
  • 二维布局使用 CSS Grid，一维布局使用 Flexbox

资源

评论

支持 Markdown