responsive-design

Name: responsive-design
Author: mindrally

github.com/mindrally设计与 UI288840 次安装3 周前更新

代码仓库

关于 responsive-design

面向设计师和开发者的响应式网页设计指南，涵盖移动优先布局、无障碍、适配资源、性能，以及不同屏幕尺寸的测试。

主要功能

01语义化 HTML 与无障碍设计
02移动优先的媒体查询
03灵活的 Flexbox 与 Grid 布局
04响应式排版与图像
05视口和设备测试建议

适用场景

01规划移动优先的页面布局
02根据容器尺寸调整组件
03改善不同设备上的图像加载
04检查触控、键盘和缩放体验

安装

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

$npx skills add https://github.com/mindrally/skills --skill responsive-design

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

详细介绍

响应式设计指南

核心原则

编写语义化 HTML，提升无障碍性和 SEO
使用 CSS 进行样式设计，避免内联样式
使用媒体查询和灵活布局确保响应式设计
使用 ARIA 角色和属性，优先考虑无障碍性
采用移动优先的设计方式，再针对更大的屏幕进行增强

移动优先的方法

策略

从最小视口的样式开始
通过渐进增强增加复杂性
基础样式无需媒体查询即可生效
媒体查询为更大的屏幕添加功能

优势

迫使你优先考虑必要内容
提升移动设备上的性能
确保核心功能在所有设备上都能正常使用
降低 CSS 的复杂性和特异性问题

/* Base styles for mobile */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

灵活布局

Flexbox

用于一维布局（行或列）
利用 flex-wrap 实现响应式换行
使用 gap 保持间距一致
结合媒体查询调整布局

CSS Grid

用于二维布局
利用 auto-fit 和 auto-fill 创建响应式网格
使用 minmax() 灵活设置轨道尺寸
将 fr 单位与固定最小值结合使用

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

容器查询

根据容器大小而非视口大小设置组件样式
用于创建真正可复用的组件
使用 container-type 定义容器

响应式排版

流体排版

使用 clamp() 设置响应式字体大小
设置最小值、首选值和最大值
避免文字在移动设备上过小或在桌面设备上过大

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

单位

使用 rem 设置可缩放的排版尺寸
根据用户的浏览器设置确定 rem 的基准
使用 em 设置相对于组件的尺寸
避免使用固定的 px 值设置字体大小

响应式图片

Srcset 和 Sizes

使用 srcset 提供多个分辨率的图片
使用 sizes 指定各断点下的显示尺寸
让浏览器选择最合适的图片

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 800px"
  alt="Description"
>

Picture 元素

用于艺术指导（在不同尺寸下使用不同裁剪方式）
使用 <img> 元素提供回退方案
使用媒体属性为特定断点指定图片源

性能

添加 width 和 height 属性，防止布局偏移
对首屏以下的图片使用 loading="lazy"
考虑使用 aspect-ratio CSS 属性

媒体查询

常见断点

/* Small phones */
@media (min-width: 320px) { }

/* Large phones */
@media (min-width: 480px) { }

/* Tablets */
@media (min-width: 768px) { }

/* Laptops/Desktops */
@media (min-width: 1024px) { }

/* Large screens */
@media (min-width: 1280px) { }

/* Extra large screens */
@media (min-width: 1536px) { }

特性查询

使用 @supports 检测特性
为不受支持的特性提供回退方案
检测特定的 CSS 属性

偏好查询

使用 prefers-color-scheme 设置深色／浅色模式
使用 prefers-reduced-motion 适配动画偏好
使用 prefers-contrast 适配对比度偏好

触控目标

尺寸

触控目标的最小尺寸为 44x44 像素
在触控目标之间留出足够的间距
考虑移动设备上的拇指可触及区域

交互

不要只依赖悬停状态
为悬停交互提供触控替代方式
对支持悬停的设备使用 @media (hover: hover)

视口配置

Meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1">

最佳实践

始终包含 viewport meta 标签
不要禁用用户缩放（避免使用 user-scalable=no）
在启用双指缩放的情况下进行测试
确保内容在 200% 缩放时仍可使用

测试

工具

浏览器开发者工具中的设备模拟
尽可能在真实设备上测试
使用 Lighthouse 进行性能审计
使用 W3C 验证器检查代码质量

检查清单

在多种视口尺寸下测试
测试横屏和竖屏方向
使用触控和鼠标输入进行测试
测试键盘导航
确认图片加载了合适的尺寸
检查排版是否易于阅读
确认触控目标尺寸足够
使用浏览器缩放进行测试

性能注意事项

关键 CSS

将首屏关键 CSS 内联
延迟加载非关键样式表
尽量减少阻塞渲染的资源

资源优化

适当压缩图片
使用现代格式（WebP、AVIF）
延迟加载首屏以下的内容
考虑采用响应式加载策略

支持 Markdown

登录后评论