零度AI - AI小白入门指南

移动端开发基础

移动端开发需要考虑：

📱 响应式布局
🚀 性能优化
🎯 用户体验
📊 设备适配

最佳实践

移动优先，渐进增强。先设计移动端，再扩展到桌面端。

响应式设计

1. 移动优先的 CSS

css

/* 基础样式（移动端） */
.container {
  padding: 0.5rem;
  max-width: 100%;
}

/* 平板设备 */
@media (min-width: 768px) {
  .container {
    padding: 1rem;
    max-width: 720px;
  }
}

/* 桌面设备 */
@media (min-width: 1024px) {
  .container {
    padding: 2rem;
    max-width: 960px;
  }
}

2. 使用 Tailwind CSS

html

<!-- 响应式列布局 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4">项目 1</div>
  <div class="bg-white p-4">项目 2</div>
  <div class="bg-white p-4">项目 3</div>
</div>

<!-- 响应式文本 -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">响应式标题</h1>

移动端优化

1. 触摸交互

css

/* 触摸友好的按钮 */
.button {
  min-height: 48px;
  padding: 0 1rem;
  font-size: 16px; /* 防止iOS缩放 */
}

/* 触摸反馈 */
.button:active {
  transform: scale(0.98);
  background-color: #f3f4f6;
}

2. 图片优化

html

<!-- 使用 srcset 适应不同屏幕 -->
<img
  src="small.jpg"
  srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
  sizes="(max-width: 600px) 600px, (max-width: 1200px) 1200px, 2000px"
  alt="响应式图片"
>

<!-- WebP 格式 -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="优化后的图片">
</picture>

移动端性能优化

1. 加载性能

javascript

// 懒加载图片
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target
        img.src = img.dataset.src
        observer.unobserve(img)
      }
    })
  })

  document.querySelectorAll('img[data-src]').forEach(img => {
    observer.observe(img)
  })
}

2. 减少重绘和重排

javascript

// 使用 transform 代替 left/top
const element = document.querySelector('.box')
element.style.transform = 'translateX(100px)'

// 使用 will-change 优化动画
.box {
  will-change: transform, opacity;
}

移动端调试

1. Chrome DevTools 远程调试

连接设备

打开 Android 手机的开发人员选项
启用 USB 调试
用 USB 线连接电脑
在 Chrome 中访问 chrome://inspect

调试页面

在手机上打开需要调试的页面
在 chrome://inspect 中找到对应的页面
点击 "Inspect" 开始调试

2. 模拟设备

javascript

// 在开发中模拟不同设备
const isMobile = window.matchMedia('(max-width: 600px)').matches
if (isMobile) {
  console.log('这是移动设备')
}

实战案例：移动端导航

响应式导航

html

<!-- 移动端菜单 -->
<nav class="bg-white shadow-sm">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <!-- 桌面端导航 -->
      <div class="hidden md:flex items-center space-x-4">
        <a href="/" class="text-gray-700 hover:text-gray-900 px-3 py-2">首页</a>
        <a href="/about" class="text-gray-700 hover:text-gray-900 px-3 py-2">关于</a>
        <a href="/contact" class="text-gray-700 hover:text-gray-900 px-3 py-2">联系</a>
      </div>

      <!-- 移动端菜单按钮 -->
      <div class="md:hidden flex items-center">
        <button id="menuButton" class="text-gray-700 hover:text-gray-900">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- 移动端菜单内容 -->
  <div id="mobileMenu" class="md:hidden hidden">
    <a href="/" class="block px-3 py-2 text-gray-700 hover:text-gray-900">首页</a>
    <a href="/about" class="block px-3 py-2 text-gray-700 hover:text-gray-900">关于</a>
    <a href="/contact" class="block px-3 py-2 text-gray-700 hover:text-gray-900">联系</a>
  </div>
</nav>

<script>
document.getElementById('menuButton').addEventListener('click', function() {
  const menu = document.getElementById('mobileMenu')
  menu.classList.toggle('hidden')
})
</script>

常见问题

Q: 如何防止iOS输入框缩放？

css

input {
  font-size: 16px;
}

Q: 如何优化长列表性能？

javascript

// 实现虚拟滚动
import VirtualList from 'react-window'

Q: 如何处理断网情况？

javascript

window.addEventListener('online', () => {
  console.log('网络连接已恢复')
})

window.addEventListener('offline', () => {
  console.log('网络连接已断开')
})

下一步

掌握了移动端开发后，接下来可以学习：

Claude Code 混合开发 - React Native、Flutter
Claude Code 性能监控 - 应用性能监控
Claude Code 用户体验 - 移动端 UX 优化

移动优先