前端切图不再哭：Figma设计稿 + PostCSS 自动化 rem 适配方案全攻略（移动端适配必看！）

你是不是也曾在深夜对着 750px 的设计稿和 375px 的手机屏幕，对着 1px 是不是 0.5px 哭泣？

你是不是也想复制设计稿里的样式，一键生成 rem？

本篇文章，带你彻底搞懂移动端项目中最常见也最容易踩坑的两个核心问题：

✅ 如何从设计稿快速获取样式？

✅ 如何将 px 自动转成 rem 实现响应式适配？

---

一、前端接到设计稿后第一反应？

UI 说："这是750宽的稿子"

你脑子里全是问号：

• 那我要用 px 写还是 rem 写？
• px 是设计稿的 px，还是 CSS 的 px？
• 手机屏幕才 375px，我写个 750px 是不是爆了？

没错，前端最常遇到的第一关卡，就是 设计稿尺寸 → 实际设备适配

---

二、设计稿尺寸与设备宽度换算原理

一张图看懂设计稿与手机屏幕的关系：

属性	说明
设计稿宽度	750px（主流设计稿，单位是设计像素）
设备宽度	375px（iPhone 6/7/8 宽度，单位是 CSS px）
devicePixelRatio	2（即 1px = 2 物理像素）

所以：设计稿 750px = 设备上 375px，正好就是 2 倍关系

那你写 CSS 的时候怎么写尺寸？难道要 /2 自己算？

别急，咱有自动化方案！

---

三、PostCSS + px-to-viewport 自动转 rem 方案

是的！我们写的时候还是写设计稿上的 px，构建的时候自动转成 rem！

为啥用 rem？

• 响应式适配（只改一行 html font-size，就能全局放大缩小）
• 相对单位，适配不同屏幕宽度，完美结合媒体查询

---

四、项目配置（Vite + PostCSS + Stylus）

1️⃣ 安装依赖

npm i postcss-pxtorem -D

如果你用的是 postcss-px-to-viewport，也一样操作，只是配置稍有不同。

---

2️⃣ 配置 postcss.config.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 1rem = 37.5px，适配375px宽设备
      propList: ['*'], // 所有属性都转
      exclude: /node_modules/i, // 排除三方包
    },
  },
};

rootValue 怎么来的？

设计稿	rootValue
750px	37.5（750 / 20）
375px	16 or 32 根据设计

---

3️⃣ stylus 自动识别 px（写得爽）

// example.styl
.box
  width 150px
  height 60px
  font-size 32px

构建后自动变成，会编译一下：

.box {
  width: 4rem;
  height: 1.6rem;
  font-size: 0.85rem;
}

---

🧩 五、移动端适配核心样板代码

html 根字体大小（动态设置）

// src/utils/setRem.js
const baseSize = 37.5 // 设计稿宽度 / 10
function setRem() {
  const scale = document.documentElement.clientWidth / 375
  document.documentElement.style.fontSize = `${baseSize * scale}px`
}
window.addEventListener('resize', setRem)
setRem()

配合 viewport 设置：

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

---

六、设计稿自动获取尺寸（不再肉眼瞪）

工具推荐：

工具	功能	推荐理由
蓝湖（Lanhu）	自动标注、CSS 样式、颜色	国人爱用，适配中文项目
Figma Dev Mode	自动生成 CSS/布局信息	免费好用，一键复制 CSS
Pixso / Zeplin	多平台协作标注	UI/前端对接效率神器
Figma 插件 Measure	自动测量整页	一次测量所有尺寸，节省时间
Figma Tokens	提取变量 token	可导出 SCSS / Tailwind 等样式系统

---

七、完整适配方案汇总

任务	工具链	自动化程度
获取尺寸	蓝湖 / Figma Dev Mode	⭐⭐⭐⭐
自动生成样式	Figma 插件 / Dev Mode	⭐⭐⭐
自动转 rem	PostCSS + Stylus	⭐⭐⭐⭐⭐
移动端适配	viewport + rem 脚本	⭐⭐⭐⭐⭐
自动生成组件	Locofy / Anima	⭐⭐（仍需手动调）

---

八、常见问题解答（小白必看）

❓为什么不手写 rem？

因为设计稿单位是 px，写 rem 等于手动除以 37.5，全靠 mental math。人终究不是计算器。

❓用 vw 代替 rem 行不行？

行，但复杂场景下 vw 控制不够精细，比如字体缩放、input 输入异常。

❓1px 问题怎么解决？

用 ::after + transform: scale(0.5) + devicePixelRatio 判定，或借助 viewport 缩放原理。

---

九、结语：前端适配，别再靠眼瞪！

适配设计稿不再是玄学，只要你掌握了：

• Figma / 蓝湖自动测量技巧
• PostCSS 自动化转 rem
• 动态设置 html 字体大小

别再苦苦数着 px 对照手机测啦！

---

如果你觉得这篇文章有帮助，欢迎点赞 + 收藏 + 评论！