关于CSS 单位换算
CSS 长度单位有多种，包括绝对单位（px）与相对单位（rem、em、vw、vh、% 等）。px 是基于设备像素的绝对单位；rem 基于根元素（html）的字体大小；em 基于父元素的字体大小；vw 基于视口宽度（1vw = 1% 视口宽度）。不同单位在不同场景下有不同优势，响应式布局常需要在它们之间换算。
在响应式开发中，开发者常需要进行 CSS 单位换算：把设计稿的 px 转换为 rem 以适配不同屏幕、把 vw 转换为 px 估算实际显示尺寸、计算 em 相对父元素的累积值等。手动计算既繁琐又易错，借助专门工具可以瞬间完成。
本 CSS 单位换算工具支持 px、rem、em、vw 之间的相互换算，可自定义基准字号（默认 16px）。所有换算在浏览器本地完成，无需联网。
核心特性
多单位互转
支持 px、rem、em、vw 四种主流 CSS 长度单位的相互换算，覆盖响应式开发常见需求。
基准字号可调
可自定义根元素字号（默认 16px），适配不同项目的 rem 基准设置。
视口宽度支持
可输入视口宽度计算 vw 与 px 的换算，方便响应式布局设计。
实时换算
输入即换算，无需点击按钮，方便快速对比。
本地处理零上传
所有换算在浏览器内完成，无需联网。
使用场景
响应式布局适配
把设计稿的 px 值转换为 rem，适配不同屏幕尺寸的响应式布局。
rem 估算实际尺寸
把 rem 转换为 px，估算在特定根字号下实际显示的像素尺寸。
vw 视口单位换算
把 vw 转换为 px，估算在不同屏幕宽度下的实际显示尺寸。
em 累积计算
计算 em 在嵌套元素中的累积值，避免因继承导致的字号异常。
常见问题
rem 与 em 有什么区别？
rem 基于根元素（html）的字体大小，所有元素使用同一基准；em 基于父元素的字体大小，嵌套元素会累积放大。rem 更可预测，em 在某些组件场景下更灵活。
vw 与 % 有什么区别？
vw 基于视口宽度（1vw = 1% 视口宽度），与父元素无关；% 基于父元素的对应属性（如 width 基于父元素 width）。两者在响应式布局中有不同用途。
基准字号应该设置为多少？
常见做法是 16px（浏览器默认字号）或 10px（便于计算，1rem = 10px）。建议使用 16px 以确保可访问性，避免影响用户调整字号。
移动端 1px 边框问题怎么解决？
移动端 1px 边框在高 DPI 屏幕下显示偏粗，常见解决方案是使用 transform: scale(0.5) 缩小或使用 0.5px（部分浏览器支持）。本工具可帮助计算 0.5px 在不同单位的换算值。