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