面试官：聊聊移动端适配？我拿起rem和vw就是一顿操作！哈喽，各位正在前端道路上“奋勇杀敌”的兄弟姐妹们！今天我们来聊一

✨ 面试官：聊聊移动端适配？我拿起rem和vw就是一顿操作！

哈喽，各位正在前端道路上“奋勇杀敌”的兄弟姐妹们！今天我们来聊一个面试时几乎必问，但又总让人有点头大的话题——移动端适配。

是不是一听到“适配”，脑子里就开始飘过 rem, vw, dpr, viewport 这些“磨人的小妖精”？别慌！今天咱们就用大白话，配上生活中的例子，把它们安排得明明白白！

⚠️ 一、为啥要有移动端适配？

想象一下，你精心设计了一张海报，在你的27寸大显示器上看着贼棒。结果你女朋友拿出她的iPhone Mini一看，排版乱成一锅粥，图片大到只剩一只眼睛。她大概会说：“你这做的啥玩意儿？”

这就是“不适配”的后果。

PC端时代，大家屏幕尺寸差别不大，做网页跟在A4纸上画画差不多。但到了移动端，那可真是“百花齐放”了：华为的折叠屏、苹果的Mini、安卓的各种“全面屏”、“瀑布屏”... 屏幕尺寸、分辨率、像素密度（DPR）千奇百怪。

面试官提问点：为什么要做移动端适配？ 回答要点：核心就是为了让我们的网页在不同尺寸、不同分辨率的移动设备上，都能有一致且良好的视觉体验和交互体验。不能在一个手机上看着是“高富帅”，在另一个手机上就成了“矮矬穷”。

🔧 二、适配的基础：Viewport视口

要想做好适配，首先得跟浏览器商量好：“喂，哥们儿，按我说的尺寸来显示！” 这个“商量”的过程，就是通过设置 viewport meta标签来完成的。

这行代码就像是给网页施加的一个“魔法结界”，几乎是所有移动端页面的标配。

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

我们来把它拆解一下，就像在餐厅点菜一样：

width=device-width：**（核心）**告诉浏览器，我们网页的宽度就等于设备的宽度。别自作主张搞什么缩放了！
initial-scale=1.0：初始缩放比例是1.0，也就是不缩放。
maximum-scale=1.0, minimum-scale=1.0：最大和最小缩放比例都是1.0。
user-scalable=no：禁止用户手动缩放。这个嘛，看产品需求，但大部分场景为了保持布局稳定，都会禁止。

一句话总结：这行代码的作用就是让网页的宽度和设备的屏幕宽度保持一致，并且不允许用户缩放，为我们后续的适配方案打下坚实的基础。

🔄 三、主流适配方案：rem大法好！

这是目前最流行、最成熟的方案，也是你简历上必须敢写“精通”的方案！

什么是rem？

rem (root em) 是一个相对单位。它不像 px 那样是“死”的，它的值是相对于根元素（也就是<html>标签）的 font-size 来计算的。

举个栗子：如果 html { font-size: 16px; }，那么 1rem 就等于 16px，2rem 就等于 32px。

核心思想：既然 rem 的大小听 html 的 font-size 的话，那我们是不是可以通过动态改变 html 的 font-size，来让所有使用 rem 单位的元素实现等比缩放呢？

Bingo！你答对了！

我们只需要根据不同手机的屏幕宽度，用JavaScript动态计算出对应的 font-size 并设置给 html 标签，剩下的交给CSS去计算就好了。

🛠️ 如何实现？(重点来了！)

你提供的图片里展示的就是一套非常经典的 rem 适配工作流，我们来复现并解释一下：

第一步：安装“神兵利器”

amfe-flexible: 这个库会自动检测设备宽度，然后动态地在<html>标签上添加 font-size 样式。它的原理很简单，就是把屏幕宽度分成10份，1份就是1rem，也就是 font-size 的值。比如，对于375px宽的屏幕，它会设置 font-size: 37.5px。
postcss-pxtorem: 这是一个PostCSS插件。它能让你在写CSS的时候继续用你最熟悉的 px，在编译打包的时候，它会自动帮你把 px 转换成 rem。简直是懒人福音！

# 安装两个插件
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

第二步：配置与使用

在 main.js 中引入 amfe-flexible：让它在项目启动时就开始工作。
```
// main.js
import 'amfe-flexible';
```

配置 postcss.config.js (或者在 vue.config.js 里配置): 告诉 postcss-pxtorem 转换规则。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // rootValue的值需要根据设计稿宽度来定
      // 如果设计稿是750px，则rootValue为75。
      // 如果设计稿是375px，则rootValue为37.5。
      // 这样，一个75px的div，就会被转换为 1rem。
      rootValue: 37.5, 
      propList: ['*'], // 表示所有属性都进行转换
    },
  },
};

大功告成！ 现在，你只需要按照 375px 的设计稿，该写 width: 100px 就写 width: 100px，插件会自动帮你转换成 2.6667rem，然后在不同手机上完美缩放！是不是很爽？

🚀 四、未来的趋势：vw/vh方案

虽然 rem 方案很香，但它依赖JS。那有没有纯CSS就能搞定的方案呢？当然有，那就是 vw/vh。

vw (viewport width): 视口宽度的 1/100。100vw 就是整个屏幕的宽度。
vh (viewport height): 视口高度的 1/100。100vh 就是整个屏幕的高度。

优点：

纯CSS实现，没有JS的性能开销。
语义化更强，50vw 就是一半屏幕宽，非常直观。

缺点：

px 转 vw 的计算可能出现小数，导致像素偏差。
在旧一些的安卓机上可能存在兼容性问题。

vw 方案同样可以借助 postcss-px-to-viewport 插件来自动转换，配置和 pxtorem 类似，这里就不赘述了。目前来看，rem 依然是兼容性最好、最稳妥的选择，但 vw 绝对是未来的方向。

🤯 五、面试加分项：1px边框问题

在高清屏（DPR > 1）上，你写的 border: 1px solid black; 看起来会比实际要粗。这是因为CSS的 1px 在这些屏幕上会用2个或3个物理像素来渲染。

怎么解决？ 面试官很喜欢问这个问题，能体现你对细节的追求。

伪元素 + transform: 这是最常用也最推荐的方法。给元素设置一个伪元素（::before 或 ::after），让伪元素的宽高是100%，边框设为 1px，然后通过 transform: scaleY(0.5) 或 scaleX(0.5) 将其缩放到0.5px，视觉上就变细了。
box-shadow 模拟: 用 box-shadow: 0 0.5px 0 0 #000; 来模拟边框，但阴影颜色会比实际边框色浅。
直接写 0.5px: iOS 8+ 支持，但安卓大部分不支持，兼容性差。

✨ 总结

好了，今天关于移动端适配的分享就到这里。我们来快速回顾一下：

为啥适配：为了在各种妖魔鬼怪的屏幕上都有统一优秀的体验。
适配基础：先用 viewport 定好规矩，让页面宽度等于设备宽度。
主流方案：rem + flexible.js + pxtorem 插件，一套组合拳，稳定又高效。
未来趋势：vw/vh 是纯CSS的未来，但目前 rem 仍是老大哥。
加分项：别忘了高清屏下的 1px 边框问题，用 transform 解决它！

掌握了这些，下次面试官再问你移动端适配，你就可以挺直腰板，自信地说：“这题我会！” 然后拿起 rem 和 vw，开始你的表演！

希望这篇文章对你有帮助，如果觉得不错，别忘了点赞、收藏、加关注哦！我们下期再见！