移动端适配方案

移动端适配的核心目标是确保页面在不同设备、屏幕尺寸下能够 布局合理、比例协调、体验一致。以下是主流适配方案及其适用场景：

---

一、Viewport 视口设置

1. 标准 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

2. 动态 Viewport（解决刘海屏）

• 使用 viewport-fit=cover （适配全面屏）：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

---

二、百分比布局

原理

利用百分比（ % ）定义元素的宽度 / 高度，相对父容器自适应。

.child {
  width: 50%; /* 父容器宽度的一半 */
  padding-top: 25%; /* 相对于父容器宽度的比例实现固定宽高比 */
}

适用场景：简单布局，配合其他方案使用。
缺点：嵌套复杂时计算不便，无法完美适配所有层级。

---

三、媒体查询（Media Queries）

步骤

针对不同屏幕尺寸编写特定 CSS。

/* 小屏幕 (< 768px) */
@media screen and (max-width: 768px) {
  .box { padding: 5px; }
}

/* 中等屏幕 (768px~992px) */
@media screen and (min-width: 768px) and (max-width: 992px) {
  .box { padding: 10px; }
}

适用场景：响应式断点设计（例如 PC、平板、手机三端适配）。
缺点：需编写多套样式，维护成本较高。

---

四、REM 适配方案

1. 原理

动态计算根元素 font-size ，用 REM 作为单位实现等比缩放。

代码实现（配合 Flexible.js）：

// 设置基准值（以设计稿750px为例，1rem = 75px）
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

CSS 开发（Sass 辅助）：

@function rem($px) { @return $px / 75 * 1rem; } // 750px设计稿：1px → 1/75 rem

.box {
  width: rem(150); // 150px → 2rem
}

2. 现代工程化方案（PostCSS 插件自动转换）

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度/10（750/10）
      propList: ['*'],
    },
  },
};

适用场景：复杂视觉稿需严格等比缩放的场景（如电商页面）。
优点：精确适配，代码维护简单；缺点：需重置根字体大小，可能影响第三方组件样式。

---

五、VW/VH 适配方案

1. 原理

直接基于视口宽高的百分比单位，无需动态计算。

• 1vw = 1% 视口宽度
• 1vh = 1% 视口高度

代码示例：

/* 以750px设计稿为例，750px = 100vw */
.box {
  width: 50vw;       /* 375px */ 
  font-size: 4vw;    /* 约 30px（基于视口动态计算） */
}

2. 结合 PostCSS 自动化转换

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750, // 设计稿宽度
      unitToConvert: 'px',
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
    },
  },
};

适用场景：现代浏览器项目，需要简洁的适配方案。
优点：无额外 JS 依赖，适配自然；缺点：无法精细控制小屏幕下过小字体（需配合媒体查询）。

---

六、Flexible 布局（Flexbox/Grid）

1. Flexbox 弹性盒

.container {
  display: flex;
  justify-content: space-between; /* 子元素自动间隔分布 */
}
.item {
  flex: 1; /* 均分剩余空间 */
}

2. CSS Grid 网格布局

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充，最小200px */
}

适用场景：复杂布局结构，如响应式导航、卡片列表。
优点：代码简洁，支持自动换行适配。

---

七、第三方 UI 框架适配

1. Vant 等移动端组件库

• 推荐方案：
  使用 rem + postcss-pxtorem ，框架默认配置适配设计稿 375px。

// 在项目中设置基准单位（如 Vant 默认以 37.5px 为基准）：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

2. 按需配置设计稿尺寸

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // Vant 设计稿 375px → 37.5
      propList: ['*'],
    },
  },
};

---

八、Retina 屏适配（1px 问题）

原理

利用伪元素 + transform 缩放模拟高清边框。

.border-1px {
  position: relative;
}
.border-1px::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  transform: scaleY(0.5); /* 缩放 50% 适配 Retina 屏 */
  transform-origin: 0 0;
}

---

总结：方案对比与选择建议

方案	优点	缺点	适用场景
REM	控制精准，兼容性好	需动态计算根字体大小	复杂视觉稿（电商、活动页）
VW/VH	原生支持，无需 JS	小屏幕下可能显示过小	现代浏览器项目
Flex/Grid	布局灵活，代码简洁	兼容性需注意（IE 部分支持 Grid）	响应式结构布局
媒体查询	精确控制断点	维护成本高	多端差异大的项目

推荐实践

• 常规项目： REM + VW 混合方案，使用 PostCSS 自动转换。
• 组件库项目：优先 VW/VH + 媒体查询断点。
• 快速开发：使用 Vant/Element Mobile 等 UI 框架，内置适配方案。