菜单
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/guilhermemarketing/esc-skills --skill responsive-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | responsive-design |
| description | Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. |
| version | 1.0.0 |
| updated | 2026-03-17 |
Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
/* Mobile-first breakpoints */
/* Base: Mobile (<640px) */
@media (min-width: 640px) { /* sm: Landscape phones, small tablets */ }
@media (min-width: 768px) { /* md: Tablets */ }
@media (min-width: 1024px) { /* lg: Laptops, small desktops */ }
@media (min-width: 1280px) { /* xl: Desktops */ }
@media (min-width: 1536px) { /* 2xl: Large desktops */ }
/* Define a containment context */
.card-container {
container-type: inline-size;
container-name: card;
}
/* Query the container, not the viewport */
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
}
@container card (min-width: 600px) {
.card { grid-template-columns: 250px 1fr; }
.card-title { font-size: 1.5rem; }
}
/* Container query units */
.card-title {
font-size: clamp(1rem, 5cqi, 2rem);
}
:root {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
--text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
--text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
--text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
--text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
--space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
--space-sm: (, + , );
: (, + , );
: (, + , );
: (, + , );
}
/* Auto-fit grid - items wrap automatically */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 1.5rem;
}
/* Responsive grid with named areas */
.page-layout {
display: grid;
grid-template-areas: "header" "main" "sidebar" "footer";
gap: 1rem;
}
@media (min-width: 768px) {
.page-layout {
grid-template-columns: 1fr 300px;
grid-template-areas: "header header" "main sidebar" "footer footer";
}
}
@media (min-width: 1024px) {
.page-layout {
grid-template-columns: 250px 1fr 300px;
grid-template-areas: "header header header" "nav main sidebar" "footer footer footer";
}
}
<picture>
<source media="(min-width: 1024px)" srcSet="/hero-wide.webp" type="image/webp" />
<source media="(min-width: 768px)" srcSet="/hero-medium.webp" type="image/webp" />
<source srcSet="/hero-mobile.webp" type="image/webp" />
<img src="/hero-mobile.jpg" alt="Hero" class="w-full h-auto" loading="eager" fetchpriority="high" />
</picture>
.full-height-dynamic { height: 100dvh; } /* Accounts for mobile browser UI */
.min-full-height { min-height: 100svh; }
.hero-title { font-size: clamp(2rem, 5vw, 4rem); }