移动端适配策略

移动端适配的必要性

移动设备屏幕尺寸碎片化严重，从320px的小屏手机到768px的平板，开发者需要确保网站在各种设备上都能正常显示。传统的px单位无法满足这种需求，固定布局在移动端会导致内容溢出或留白过多。

视口设置基础

HTML文档中必须正确设置viewport，这是移动端适配的第一步：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

关键参数说明：

• width=device-width：视口宽度等于设备宽度
• initial-scale=1.0：初始缩放比例为1
• maximum-scale=1.0：禁止用户放大
• user-scalable=no：禁止用户手动缩放

Vite中的REM适配方案

REM（Root EM）基于根元素字体大小计算，结合PostCSS插件实现自动转换：

1. 安装必要依赖：

npm install postcss-pxtorem autoprefixer amfe-flexible -D

2. 配置vite.config.js：

import { defineConfig } from 'vite'
import autoprefixer from 'autoprefixer'
import pxtorem from 'postcss-pxtorem'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer(),
        pxtorem({
          rootValue: 16,
          propList: ['*'],
          selectorBlackList: ['.norem']
        })
      ]
    }
  }
})

3. 在main.js引入flexible：

import 'amfe-flexible'

Viewport单位方案

VW/VH单位直接相对于视口尺寸，1vw等于视口宽度的1%：

.container {
  width: 100vw;
  padding: 5vw;
}

.title {
  font-size: 4vw;
  margin-bottom: 2vh;
}

配合PostCSS插件实现降级方案：

npm install postcss-viewport-units -D

配置示例：

pxtorem({
  // ...其他配置
  mediaQuery: true,
  replace: true,
  viewportUnit: 'vw'
})

媒体查询策略

针对不同断点设计响应式布局：

/* 小屏手机 */
@media (max-width: 375px) {
  .sidebar {
    display: none;
  }
}

/* 平板 */
@media (min-width: 768px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面端 */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

移动端1px边框问题

高清屏下1px实际显示较粗，解决方案：

.border-1px {
  position: relative;
}
.border-1px::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #000;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

图片适配方案

根据不同DPI加载不同图片：

<picture>
  <source media="(min-resolution: 2dppx)" srcset="image@2x.jpg">
  <source media="(min-resolution: 3dppx)" srcset="image@3x.jpg">
  <img src="image.jpg" alt="示例图片">
</picture>

CSS中的背景图适配：

.logo {
  background-image: url('image.jpg');
  background-size: contain;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .logo {
    background-image: url('image@2x.jpg');
  }
}

触摸事件优化

移动端需要特别处理触摸反馈：

document.querySelector('.btn').addEventListener('touchstart', function() {
  this.classList.add('active')
})

document.querySelector('.btn').addEventListener('touchend', function() {
  this.classList.remove('active')
})

CSS增强触摸体验：

.btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn:active {
  transform: scale(0.98);
}

移动端调试技巧

Vite项目配置移动端调试：

1. 修改vite.config.js：

server: {
  host: '0.0.0.0',
  port: 3000,
  strictPort: true
}

2. 使用Eruda调试工具：

npm install eruda -D

在开发环境动态加载：

if (import.meta.env.DEV) {
  import('eruda').then(eruda => eruda.init())
}

性能优化要点

移动端网络环境复杂，需要特别注意：

1. 代码分割：

// 动态导入组件
const Modal = () => import('./components/Modal.vue')

2. 图片懒加载：

<img v-lazy="imageUrl" alt="描述">

3. 关键CSS内联：

<style>
  /* 关键样式 */
</style>

移动端常见问题解决

1. iOS橡皮筋效果阻止：

document.body.addEventListener('touchmove', function(e) {
  if (e.target.classList.contains('scroll-container')) {
    e.preventDefault()
  }
}, { passive: false })

2. 输入框被键盘遮挡：

window.addEventListener('resize', () => {
  if (document.activeElement.tagName === 'INPUT') {
    document.activeElement.scrollIntoView({ block: 'center' })
  }
})

3. 快速点击延迟解决：

npm install fastclick -D

使用：

import FastClick from 'fastclick'
FastClick.attach(document.body)

框架特定适配方案

在Vue + Vite项目中的实践：

1. 响应式工具函数：

import { ref, onMounted, onUnmounted } from 'vue'

export function useViewport() {
  const width = ref(window.innerWidth)
  
  const update = () => {
    width.value = window.innerWidth
  }
  
  onMounted(() => {
    window.addEventListener('resize', update)
  })
  
  onUnmounted(() => {
    window.removeEventListener('resize', update)
  })
  
  return { width }
}

2. 组件级媒体查询：

<template>
  <div :class="{ 'mobile-layout': isMobile }">
    <!-- 内容 -->
  </div>
</template>

<script setup>
import { useViewport } from './hooks/useViewport'

const { width } = useViewport()
const isMobile = computed(() => width.value < 768)
</script>

现代CSS方案

使用clamp()实现流体排版：

.title {
  font-size: clamp(16px, 4vw, 24px);
}

.container {
  padding: clamp(10px, 5%, 20px);
}

CSS容器查询示例：

.card-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

移动端导航模式

实现移动端专属导航组件：

<template>
  <div class="mobile-nav" :class="{ active: isOpen }">
    <button @click="toggleMenu">☰</button>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
const toggleMenu = () => {
  isOpen.value = !isOpen.value
}
</script>

<style>
.mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  transition: left 0.3s;
}

.mobile-nav.active {
  left: 0;
}
</style>