css单位换算及适配

你这个问题很常见，涉及 CSS 的长度单位、响应式设计和适配。我给你梳理一下常见单位、换算规则，以及在项目中如何做适配。

---

🔹 一、常见 CSS 单位

1. 绝对单位

• px（像素）：最常用，固定大小，不随屏幕变化。

• pt、cm、mm：印刷用，Web 开发几乎不用。

2. 相对单位

• %：相对父元素的宽高。

• em：相对 自身或父元素字体大小（1em = 当前 font-size）。

• rem：相对 根元素（html）的 font-size。常用于移动端适配。

• vw：相对 视口宽度（1vw = 1% 屏幕宽度）。

• vh：相对 视口高度（1vh = 1% 屏幕高度）。

• vmin / vmax：取视口宽高的最小值/最大值的百分比。

---

🔹 二、常见换算方法

1. px → rem

如果 html { font-size: 16px }，那么：

• 1rem = 16px

• 32px = 2rem

一般移动端会动态设置根元素的 font-size，比如：

// flexible.js 示例
const setRem = () => {const baseSize = 16const scale = document.documentElement.clientWidth / 375 // 以设计稿 375px 为基准document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
window.onresize = setRem
setRem()

这样页面会随屏幕宽度变化自动适配。

---

2. px → vw

1vw = 屏幕宽度的 1%。

假设设计稿宽度是 375px：

• 375px = 100vw

• 1px = 100 / 375 ≈ 0.2667vw

所以：

/* 设计稿上 20px */
width: 20px;
/* 转换后 */
width: 5.333vw; /* (20/375)*100 */

可以配合 PostCSS 插件自动转换（推荐 postcss-px-to-viewport）。

---

3. px → em

如果父元素 font-size: 16px：

• 1em = 16px

• 24px = 1.5em

---

🔹 三、适配方案

方案 1：rem 适配（常见）

• 页面根元素 html 的 font-size 根据屏幕宽度动态设置。

• 页面元素用 rem 来写。

• 优点：兼容性好，适合移动端。

---

方案 2：vw/vh 适配（流行）

• 直接用 vw 来写宽度，用 vh 来写高度。

• 配合 PostCSS 可以自动把 px 转 vw。

• 优点：简单直接，效果好。

• 缺点：有时小数点过多，导致四舍五入误差。

---

方案 3：媒体查询 (Media Query)

@media screen and (max-width: 768px) {body { font-size: 14px; }
}
@media screen and (min-width: 769px) {body { font-size: 16px; }
}

• PC 端和移动端分开写规则。

• 适合复杂的多端适配。

---

方案 4：混合方案

• rem 处理字体大小。

• vw/vh 处理布局。

• 媒体查询作为兜底。

---

🔹 四、总结

• 移动端推荐：vw + PostCSS，或者 rem 动态根字体。

• PC 端推荐：媒体查询 + % 或 em/rem。

• 公式：

  • px → rem = px / 根字体大小

  • px → vw = (px / 设计稿宽度) * 100

---