Responsive Web Design

作者 secondsky88378361314fMIT227 个星标收录于 2026年10月8日更新于 2026年10月8日仓库10天前更新

Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility.

仅含说明Design & Creative Software Development

AI 生成的概览

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

功能: 该技能提供自适应网页界面的参考 CSS 模式，涵盖移动优先媒体查询、弹性网格、流式排版、响应式图片和 Flexbox 导航。它还列出最佳实践，例如使用弹性单位、触控目标尺寸，以及二维布局用 Grid、一维布局用 Flexbox。它产出的是指导与代码片段，而非生成文件。
适用场景: 适用于创建多设备布局、实现弹性 UI 系统，或检查跨浏览器响应式表现。适合需要统一断点、流式字体和响应式图片模式的前端工作。
运行要求: 无需脚本或软件包，智能体只需阅读说明。内容中引用了外部 MDN 文档链接。

Responsive Web Design

Build adaptive interfaces using modern CSS techniques for all screen sizes.

Mobile-First Media Queries

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;  }}

/* 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;  }}

Flexible Grid

css

.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 */  }}

.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 */  }}

Fluid Typography

css

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

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

Responsive Images

css

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

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

Flexbox Navigation

css

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

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

Best Practices

Start with mobile styles first
Use flexible units (%, rem, vw)
Test on real devices
Ensure minimum 48px touch targets
Maintain readable line lengths (45-75 chars)
Use CSS Grid for 2D layouts, Flexbox for 1D

Resources

来源与署名

来源：secondsky/claude-skills位于plugins/responsive-web-design/skills/responsive-web-design提交8837836

许可证： MIT

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

举报或申请下架

Responsive Web Design

Responsive Web Design

Mobile-First Media Queries

Flexible Grid

Fluid Typography

Responsive Images

Flexbox Navigation

Best Practices

Resources

来源与署名

更多来自 secondsky/claude-skills 的技能

Vulnerability Scanning

Web Performance Optimization

Web Performance Audit

Threejs

Tailwind V4 Shadcn

Technical Specification

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design