mobile-first-design

Name: mobile-first-design
Author: secondsky

github.com/secondsky设计与 UI240582 次安装5 周前更新

代码仓库

关于 mobile-first-design

从移动端布局出发、再适配更大屏幕的界面设计指南，介绍断点、触控目标尺寸、性能目标和渐进增强。

主要功能

01从移动端屏幕宽度开始设计
02为更大屏幕设置断点
03设置适合触控的目标尺寸
04关注页面和资源包性能目标
05采用渐进增强

适用场景

01规划从手机扩展到桌面的布局
02检查按钮尺寸和触控间距
03为移动页面设定性能限制
04在移动端基础上适配更大屏幕

安装

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

$npx skills add https://github.com/secondsky/claude-skills --skill mobile-first-design

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

详细介绍

移动优先设计

从移动设备开始设计界面，再针对更大的屏幕进行增强。

断点

名称	宽度	设备
移动设备	320-480px	iPhone SE、小屏 Android
平板电脑	481-768px	iPad mini
桌面设备	769-1024px	iPad Pro、笔记本电脑
大屏	1025px+	桌面显示器

移动优先 CSS

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

.nav {
  display: none; /* Hidden on mobile */
}

.nav-toggle {
  display: block; /* Hamburger visible */
}

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

  .nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

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

触控友好型设计

/* Minimum touch target: 48x48px */
.button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
}

/* Adequate spacing */
.list-item {
  padding: 16px;
  margin-bottom: 8px;
}

性能要求

指标	目标
首次内容绘制	3G 网络下 <3s
JS 包	<100KB（gzip 压缩后）
页面总大小	<500KB

渐进增强


<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

最佳实践

从 320px 宽度开始设计
使用相对单位（rem、%、vw）
在真实设备上测试
针对移动设备优化图片
尽量减少初始加载所需的 JavaScript
确保文本无需缩放即可清晰阅读

支持 Markdown

登录后评论