你是不是也曾在深夜对着 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️⃣ 安装依赖
css
npm i postcss-pxtorem -D如果你用的是 postcss-px-to-viewport，也一样操作，只是配置稍有不同。
2️⃣ 配置 postcss.config.js
javascript
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（写得爽）
arduino
// example.styl
.box
width 150px
height 60px
font-size 32px构建后自动变成，会编译一下：
css
.box {
width: 4rem;
height: 1.6rem;
font-size: 0.85rem;
}🧩 五、移动端适配核心样板代码
html 根字体大小（动态设置）
js
// 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 设置：
ini
<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 对照手机测啦！
如果你觉得这篇文章有帮助，欢迎点赞 + 收藏 + 评论！