CSS篇：移动端适配必学：750设计图的px到rem精准换算方法

🎓 作者简介 ： 前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: [email protected] 📩

💬 个人微信: y_t_t_t_ 📱

📌 座右铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

👥 QQ群: 906392632 (前端技术交流群) 💬

引言

在移动端开发中，设计师通常提供 750px宽的设计稿 （如iPhone 6/7/8的2倍图），而前端需要将其转换为灵活的rem单位以实现适配。本文将以 "750px设计图中20px等于多少rem" 为例，详细讲解换算方法，并给出完整的适配方案。

1. 核心概念：rem与根字体大小

rem（Root EM）是相对于 根元素（<html>）的font-size 的单位。

默认情况下，浏览器根字体大小 1rem = 16px。
但为了适配移动端，我们通常会动态设置 html 的 font-size。

2. 750px设计稿的rem换算方法

步骤1：设定基准比例

假设设计稿宽度为 750px，我们希望：

屏幕宽度 = 750px 时，1rem = 100px（方便计算，20px = 0.2rem）。
其他屏幕尺寸按比例缩放。

步骤2：动态计算根字体大小

通过JavaScript动态设置 html 的 font-size：

javascript 复制代码

document.documentElement.style.fontSize = (window.innerWidth / 7.5) + 'px';

window.innerWidth 是当前视窗宽度（如375px）。
7.5 是设计稿宽度（750px）除以我们希望的单位基准（100px）。

步骤3：计算20px对应的rem

若 1rem = 100px，则：
css 复制代码
```
20px = 20 / 100 = 0.2rem
```

直接写入CSS：

css 复制代码

.element {
  width: 0.2rem; /* 750px设计稿中的20px */
}

3. 实际应用示例

场景

设计稿中有一个按钮，宽度为 150px，高度为 60px，字体为 28px。

转换为rem

150px = 1.5rem
60px = 0.6rem
28px = 0.28rem

CSS代码

css 复制代码

.button {
  width: 1.5rem;
  height: 0.6rem;
  font-size: 0.28rem;
}

4. 完整适配方案（推荐）

方案1：Flexible.js（手淘方案）

javascript 复制代码

// 在HTML头部引入以下JS
(function flexible(window, document) {
  const docEl = document.documentElement;
  const dpr = window.devicePixelRatio || 1;

  // 调整body字体大小（防止继承影响）
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px';
    }
  }
  setBodyFontSize();

  // 设置1rem = viewWidth / 10
  function setRemUnit() {
    const rem = docEl.clientWidth / 10;
    docEl.style.fontSize = rem + 'px';
  }
  setRemUnit();

  // 监听窗口变化
  window.addEventListener('resize', setRemUnit);
})(window, document);

效果：在750px设计稿下，1rem = 75px，因此 20px ≈ 0.2667rem。

方案2：PostCSS + px2rem（自动化工具）

使用 postcss-pxtorem 插件自动转换：

javascript 复制代码

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 750px设计稿 → 1rem = 75px
      propList: ['*'],
    },
  },
};

效果：CSS中直接写 20px，编译后自动转为 0.2667rem。

5. 不同设计稿的rem基准值参考

设计稿宽度	推荐 `1rem` 基准值	20px换算为rem
750px	100px	0.2rem
750px	75px	~0.2667rem
375px	37.5px	~0.5333rem

6. 常见问题解答

Q1：为什么选择1rem = 100px？

计算方便 ：100px = 1rem，50px = 0.5rem，避免复杂小数。
兼容性：适合大多数移动端项目。

Q2：如何避免字体过大？

对字体使用 px 或 em，而非 rem（防止缩放后过大）。

或通过媒体查询限制最小字体：

css 复制代码

@media (max-width: 480px) {
  html { font-size: 50px; }
}

结语

在 750px设计稿 中，20px 转换为 rem 的值取决于你设定的基准（如 1rem = 100px 或 75px）。推荐使用 动态计算根字体大小 或 PostCSS插件 实现自动化适配。

你的项目用哪种rem方案？欢迎在评论区讨论！ 💡

欢迎在评论区分享你的想法和建议！如果你觉得这篇文章有用，别忘了点赞和收藏哦~