如何进行移动端适配

6分钟阅读

移动端适配

核心原则

移动端适配的本质是内容优先、灵活响应，而不是为每个设备单独写一套样式。

一、视口配置（第一步）

<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:1
maximum-scale=1.0禁止用户放大（可选）
user-scalable=no禁止缩放（可选）

注意

除非必要，否则不要禁止用户缩放，这会影响可访问性。

二、布局策略

1. 避免固定宽度，尽量使用相对单位

/* ❌ 固定宽度 */
.container {
  width: 375px;
}
 
/* ✅ 相对宽度 */
.container {
  width: 100%;
  max-width: 600px;
}
.container {
  width: 90vw;
}

2. 弹性盒子（Flexbox）

.container {
  display: flex;
  flex-wrap: wrap; /* 换行 */
  gap: 16px; /* 项目间距 */
}
 
.item {
  flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
  min-width: 0; /* 防止flex子项溢出 */
}

3. 网格布局（Grid）

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

三、尺寸单位

单位说明适用场景
%相对于父元素宽度、间距
vw/vh相对于视口整体布局、流式高度
rem相对于根字体字体大小、间距
em相对于当前字体元素内部相对缩放
vmin/vmax视口短边/长边响应式正方形

rem 适配方案

/* 假设设计稿 375px 宽度，根字体 16px */
/* 1rem = 16px */
 
/* 简单方案：js 动态设置 html font-size */
document.documentElement.style.fontSize = window.innerWidth / 37.5 + 'px';
 
/* 精细方案：配合 postcss-rem-to-responsive-pixel */

四、媒体查询（Media Queries）

断点策略

/* 手机（默认样式） */
.container {
  padding: 16px;
}
 
/* 平板竖屏 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}
 
/* 平板横屏 / 小笔记本 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
  }
}
 
/* 桌面显示器 */
@media (min-width: 1440px) {
  .container {
    padding: 48px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

常见断点参考

设备断点
手机< 768px
平板768px - 1024px
桌面> 1024px
大屏> 1440px

媒体查询类型

/* 宽度 */
@media (min-width: 768px) {
}
 
/* 高度 */
@media (min-height: 600px) {
}
 
/* 像素比（Retina屏） */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    content: url(logo@2x.png);
  }
}
 
/* 横竖屏 */
@media (orientation: landscape) {
}
@media (orientation: portrait) {
}
 
/* 混合条件 */
@media (min-width: 768px) and (max-width: 1024px) {
}

五、图片适配

/* 响应式图片 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
 
/* art direction - 不同设备显示不同图片 */
<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="描述">
</picture>

六、移动端特性

1. 点击高亮（tap highlight）

* {
  -webkit-tap-highlight-color: transparent;
}

2. 字体抗锯齿

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3. 触摸区域

/* 增大触摸目标 */
button,
a {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

4. 固定定位兼容

/* 移动端 fixed 定位问题 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 某些浏览器需要设置 z-index */
  z-index: 9999;
 
  /* 安全区域适配（iPhone X+） */
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}

七、调试工具

浏览器开发者工具

  1. Chrome DevTools → 切换设备模式（Ctrl+Shift+M / Cmd+Shift+M）
  2. 调节设备尺寸和像素比
  3. 测试网络节流

真机调试

# iOS Safari
# 1. 设备设置 → Safari → 高级 → Web 检查器 → 开启
# 2. Mac Safari → 开发 → 你的设备
 
# Android Chrome
# 1. Chrome → 设置 → 开发者工具 → USB 调试 → 开启
# 2. chrome://inspect

八、常见问题

常见坑点

  1. 1px 边框在高清屏模糊

    /* 使用 transform 缩放或 box-shadow */
.border {
  box-shadow: 0 0 0 1px #ddd;
}

  2. 300ms 点击延迟

    /* 解决方案1：禁用缩放（已在viewport设置） */
/* 解决方案2：使用 CSS */
* {
  touch-action: manipulation;
}

  3. 输入框聚焦页面缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- iOS 需要在 CSS 中设置 font-size >= 16px -->
input { font-size: 16px; }

  4. 100vh 包含地址栏

    /* 使用动态视口单位或 JS 计算 */
.full-height {
  height: 100vh;
}
/* 或 */
.full-height {
  height: 100dvh;
} /* 动态视口高度 */

  5. fixed 元素在 iOS 滚动穿透

    body {
  position: fixed;
  overflow: hidden;
}
/* 或使用 overflow: auto 但配合 -webkit-overflow-scrolling */

总结

策略优先级
视口配置⭐⭐⭐ 必须第一步
弹性布局（Flex/Grid）⭐⭐⭐ 核心
相对单位⭐⭐⭐ 基础
媒体查询⭐⭐ 响应式点
图片适配⭐⭐ 高清屏
移动端特性⭐ 优化体验

一句话：用百分比/弹性盒子弹性布局，用媒体查询处理极端情况，用 rem/vw 做整体缩放。

反向链接