V.13 移动端 Web 开发实践
移动端 Web 开发已成为前端领域的重中之重，用户对移动体验的期望日益提高。深度实践移动端 Web 开发，意味着不仅要实现响应式布局，更要关注触摸交互、性能优化和类原生应用体验。
V.13.1 响应式设计技巧
响应式设计是一种设计哲学，旨在使网站能够适应不同屏幕尺寸、设备和方向，确保用户在任何设备上都能获得一致且引人入胜的体验。其进阶技巧包括：
流式网格 (Fluid Grids)，使用相对单位（如百分比、em、rem、vw/vh）定义布局元素（如列宽），而非固定像素，使布局能根据视口大小自适应缩放。
弹性图片 (Flexible Images)，确保图片能根据屏幕尺寸适当缩放，避免溢出或失真。可以使用 max-width: 100%、object-fit 或 srcset/
<picture>元素来提供不同分辨率的图片，优化加载性能。CSS 媒体查询 (Media Queries)，根据屏幕尺寸、分辨率、设备方向等条件应用不同的样式。
进阶使用包括基于功能而非设备（避免针对特定设备编写媒体查询，而是根据内容的需求和布局的断点来定义查询）、min-width 优先（移动优先，从最小屏幕开始设计，逐步为更大屏幕添加样式，简化 CSS 结构）、复杂媒体查询（结合 and、or 操作符，以及 prefers-color-scheme（暗模式）、hover（触控/鼠标）、orientation（横屏/竖屏）等特性进行更精细的控制）。
容器查询 (Container Queries) todo
Flexbox 和 Grid 布局，Flexbox 擅长一维布局，如导航菜单、卡片列表等，通过 flex-grow、flex-shrink 和 flex-basis 等属性，灵活控制项目在容器中的伸缩和空间分配；CSS Grid 擅长二维布局，用于创建复杂的页面网格结构，可以轻松定义行和列，实现更强大的布局控制。视口单位 (Viewport Units)，vw (viewport width), vh (viewport height), vmin, vmax 可以用于创建与视口大小直接相关的字体大小、元素尺寸等，实现更细致的响应式效果。
自定义属性 (CSS Variables)，结合媒体查询，可以动态改变 CSS 变量的值，从而实现更灵活的主题和响应式调整。
V.13.2 Touch 事件、手势库的使用
移动设备上的触摸屏交互通过一系列低级 API 的 Touch 事件来处理，包括 touchstart（手指首次触摸屏幕）、touchend（手指离开屏幕）、touchmove（手指在屏幕上移动）和 touchcancel（触摸事件被中断）。
TouchEvent 接口封装了当前所有活动的触摸点。
Touch 接口表示单个触摸点，包含位置信息等。
TouchList 接口表示一组触摸点，用于多点触控。在实践中，通过监听这些事件，并结合 event.preventDefault() 阻止浏览器默认行为，可以实现自定义的触摸交互。
Touch.identifier 属性可用于追踪单个触摸点在整个交互过程中的唯一性。
直接使用原生 Touch 事件实现复杂手势（如捏合缩放、旋转、滑动）会非常繁琐。手势库封装了这些底层逻辑，提供了更高级、更易用的 API。ZingTouch 是一个现代 JavaScript 触摸手势检测库，提供了预定义手势（如 Tap、Swipe、Distance、Pan、Rotate）以及创建自定义手势的能力。其预定义手势包括 Tap（轻触）、Pan（拖动）、Swipe（滑动）、Distance（两指距离变化，用于缩放）、Rotate（旋转）。它可以定制手势接受的输入数量、灵敏度等参数。ZingTouch 提供了生命周期事件的钩子函数，允许开发者在手势识别的不同阶段进行操作，或创建新的手势。通过 Region 指定监听触摸事件的区域。手势事件会提供详细的数据，例如 Swipe 的速度和方向，Distance 的距离和中心点，Pan 的距离和方向等。在选择手势库时，应考量其功能完整性（是否覆盖所需手势）、性能（手势识别的准确性和效率）、易用性（API 设计是否直观，学习曲线如何）以及社区支持（是否有活跃的社区和良好的文档）。
V.13.3 移动端特有的性能优化策略
移动设备的 CPU/GPU、内存和网络带宽通常不如桌面设备，因此移动端性能优化至关重要。资源优化包括：图片优化（压缩图片、使用 WebP 等现代格式、响应式图片（<picture>、srcset）、懒加载图片）。代码压缩与混淆（Minify CSS/JavaScript，移除不必要的字符和注释）。Tree Shaking 与 Dead Code Elimination（移除未使用的 JavaScript 代码，减小 Bundle 体积）。字体优化（按需加载字体、使用 Woff2 格式、子集化字体）。
网络优化包括：HTTP/2 或 HTTP/3，利用多路复用、头部压缩等特性，减少网络请求开销。CDN (Content Delivery Network)，将静态资源分发到离用户最近的服务器，减少延迟。缓存策略，合理设置 HTTP 缓存头，利用 Service Worker 实现离线缓存和更精细的缓存控制。减少 HTTP 请求，合并 CSS/JS 文件（尽管 HTTP/2 使其重要性降低，但仍有意义），使用 CSS Sprites 或 SVG 图标。
渲染优化包括：关键渲染路径优化，优先加载和渲染首屏内容，延迟加载非关键资源。避免布局抖动 (Layout Thrashing)，避免在循环中频繁读写 DOM 属性，导致浏览器反复计算布局。GPU 加速，合理使用 CSS transform 和 opacity 等属性，利用 GPU 进行动画渲染。虚拟列表/无限滚动，对于长列表，只渲染视口内的元素，减少 DOM 数量。