移动端适配的常用方案有哪些？

介绍几种常用的移动端适配方案，并说明它们的工作原理和应用场景。

响应式设计中等移动端开发布局移动端

移动端适配的常用方案包括通过视口设置、CSS 和 JavaScript 动态调整布局，确保网站在不同设备和屏幕尺寸上获得良好的显示效果。以下是常用方案：

视口元标签 (Viewport meta tag)
基础设置，确保页面根据设备宽度缩放。需在 HTML 头添加：
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
```
这会启用“理想视口”，提升页面布局可适应性。

媒体查询 (Media Queries)
根据设备屏幕宽度等特性应用不同 CSS 规则。适用于主流屏幕尺寸的适配：

@media screen and (max-width: 600px) {
  /* 小屏幕设备样式 */
  .container { flex-direction: column; }
}
@media screen and (min-width: 750px) {
  /* 平板或大屏设备样式 */
  .sidebar { width: 20%; }
}

百分比布局 (Percentage-based Layout)
也称为流式布局，元素宽度和间距使用百分比单位确保内容自动填充。
- 示例：
```
.component {
  width: 100%;
  padding: 10% 5%;
  margin: 5% auto;
  box-sizing: border-box;
}
```
Flexible.js 方案
淘宝出库解决方案，结合 rem 和 viewport 缩放，尤其针对高清屏（HDPI）设备计算 DPR。
- 方法：引入 flexible.js 库动态设置根 font-size，并以 rem 定义所有布局单位。

rem 方案 (Rem Unit)
动态调整根 HTML 字体大小，并使用 rem 单元定义所有元素尺寸，确保比例响应缩放。

步骤：

设置视口。
使用 JavaScript 动态计算 font-size：

 function adjustFontSize() {
   const base = 16; // 基准像素 (如基于 750px 设计稿)
   const width = window.innerWidth;
   const maxWidth = 750;
   const fontSize = (width / maxWidth) * base;
   document.documentElement.style.fontSize = `${fontSize}px`;
 }
 adjustFontSize();
 window.addEventListener('resize', adjustFontSize);

在 CSS 中所有尺寸单位使用 rem（例如：font-size: 0.625rem）。

弹性布局 (Flexbox)
利用 CSS3 flex 盒子模型处理元素自适应流布局，避免元素变形。适合处理不规则列、对齐等问题：
```
.content-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.component {
  flex: 1 0 200px; /* 元素最小宽 200px */
}
```