HTML中无单位换算函数，需开发者按场景选单位：rem用于根元素缩放控制，%相对父容器，vw/vh相对视口；JS中用parseFloat或replace+Number安全转px字符串为数字。
HTML 里没有“单位换算函数”，浏览器不帮你做 px ↔ rem ↔ % 的实时计算；所谓“格式转换”，本质是开发者在不同上下文里选对单位，而不是靠工具自动转。
什么时候该用 rem 而不是 px
rem 是相对于根元素（html）字体大小的单位，核心价值是统一缩放控制。比如你设了 html { font-size: 16px; }，那 1rem 就等于 16px；改成 12px，所有 rem 值自动等比缩小。
- 适合响应式布局中需要整体缩放的场景（如适配大屏/小屏、无障碍放大）
- 配合 JavaScript 动态改
document.documentElement.style.fontSize实现主题字号切换 - 注意：不要在
rem计算中混用em或嵌套相对单位，否则会叠加失真 - 常见坑：
rem基准没重置，直接继承浏览器默认16px，但用户可能改过系统字号，导致实际值偏差
% 和 vw/vh 的行为差异在哪
% 是相对于父容器尺寸计算的，而 vw/vh 是相对于视口（viewport）宽高的 1%，二者根本不在同一参考系。
-
width: 50%→ 父容器宽为400px，子元素就是200px；父变，子立刻跟着变 -
width: 50vw→ 视口宽为800px，子元素就是400px；和父容器无关，哪怕父是100px宽，子照样撑满一半屏幕 - 容易踩的坑：
height: 100%失效很常见——因为父高未显式设置（即不是px/vh等确定值），% 高度就无从计算 - 性能提示：
vh在移动端 Safari 中存在键盘弹出后视口高度未及时更新的问题，慎用于全屏滚动布局
JavaScript 里怎么安全地把 px 字符串转成数字
样式属性读出来（如 getComputedStyle(el).fontSize）永远是带单位的字符串，比如 "24px"，不能直接参与计算。
- 别用
parseInt("24px")—— 它能工作但太脆弱，遇到" 24px"（开头空格）或"24.5px"就截断出错 - 推荐用
parseFloat("24.5px")，它会跳过前导空白、正确解析浮点数 - 更稳妥的做法是用
Number(getComputedStyle(el).fontSize.replace('px', ''))，明确剥离单位 - 注意：
getComputedStyle返回的是计算后值，但不包含 CSS 自定义属性（--size）的解析结果，需用getPropertyValue单独取
真正难的不是“怎么转”，而是“该不该转”——多数情况下，用对原生单位就能避免手动换算；强行在 JS 里做大量 px/rem 转换，往往说明 CSS 架构已经偏离了流式设计本意。视口单位、CSS clamp()、自定义属性配合 calc()，才是现代 HTML/CSS 单位协同的主干路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
