响应式设计的开始
项目刚开始，只做了 PC 端。后来要做移动端，我们用了响应式设计。用媒体查询，不同屏幕显示不同样式。
听起来很简单，但做起来很麻烦。PC 端的布局在移动端显示不好，要重新设计。
第一个问题：布局
PC 端是三栏布局，移动端要改成单栏。但改起来很麻烦，要写很多媒体查询。
更烦的是，有些组件在移动端要隐藏，有些要改变样式。媒体查询写了很多，代码变得很乱。
第二个问题：字体
PC 端字体是 16px，移动端也是 16px。但移动端屏幕小，16px 看起来很大。
我们用了 rem 和 vw，但兼容性不好。有些浏览器不支持，要写 fallback。
第三个问题：触摸
PC 端用鼠标，移动端用触摸。触摸区域太小，用户点不到。我们加大了触摸区域，但布局又乱了。
更烦的是，移动端有双击缩放，用户双击会放大页面。我们用了 viewport，但有些设备还是有问题。
第四个问题：性能
移动端性能差，PC 端的代码在移动端跑不动。动画卡顿、滚动不流畅、页面加载慢。
我们做了很多优化：减少动画、优化图片、懒加载，但效果不明显。
移动端优先
响应式设计不行，我们改成移动端优先。先做移动端，再做 PC 端。
但改起来更麻烦，要重写很多代码。花了 2 个月，才改完。
移动端优化
改成移动端优先后，我们做了这些优化：
1. 图片优化
移动端网络慢，图片要优化：
- 压缩图片，减小文件大小
- 用 WebP 格式，兼容性好的用 WebP
- 用响应式图片，不同设备加载不同尺寸
- 懒加载，滚动到才加载
2. 代码优化
移动端性能差，代码要优化：
- 减少 JavaScript，只加载必要的
- 代码分割，按需加载
- 减少 DOM 操作，提升性能
- 用 CSS 动画，不用 JavaScript 动画
3. 交互优化
移动端交互要优化：
- 加大触摸区域，至少 44x44px
- 优化滚动，用
-webkit-overflow-scrolling: touch - 禁用双击缩放，用
touch-action - 优化输入，用合适的输入类型
遇到的坑
坑一：iOS Safari
iOS Safari 有很多坑：
- 地址栏会隐藏，页面高度会变
- 100vh 不准确，要用 JavaScript 计算
- fixed 定位有问题，要用 sticky
- 滚动有惯性，要禁用
坑二：Android 浏览器
Android 浏览器也有很多坑：
- 不同厂商浏览器表现不同
- WebView 和浏览器表现不同
- 有些 CSS 属性不支持
- 性能差异很大
坑三：横竖屏切换
横竖屏切换也有问题：
- 布局会乱，要重新计算
- 键盘会弹出，页面会滚动
- 视口会变，要重新适配
现在的状态
优化后，移动端体验好了一些：
- 页面加载时间从 5 秒降到 2 秒
- 交互更流畅，卡顿减少
- 布局更合理，用户体验好
但还是有问题，比如不同设备表现不同、性能差异大等。这些问题还在优化中。
如果重新开始
如果重新做一个移动端项目，我会：
- 一开始就做移动端优先，不要后面改
- 做好图片优化，减小文件大小
- 做好代码优化，提升性能
- 做好交互优化，提升用户体验
总结
移动端开发很麻烦，不是简单的响应式设计。布局、字体、触摸、性能，都要考虑。
如果你们项目也要做移动端，建议一开始就考虑，不要后面改。后面改成本很高，效果也不好。
另外，移动端要持续优化。不同设备表现不同，要不断测试和优化。