CSS单位转换器 - 在线px转rem、em、vw、vh和%
使用可配置的基础字体大小和视口尺寸在CSS单位（px、rem、em、%、vw、vh）之间转换。免费在线CSS单位转换器。
常见问题
什么是CSS单位转换器？
CSS单位转换器是一种在不同CSS长度单位之间转换值的工具，如像素（px）、根em（rem）、em、百分比（%）、视口宽度（vw）和视口高度（vh）。由于这些单位代表不同的测量系统，转换器可以帮助开发者快速找到等效值，无需手动计算。
如何使用这个CSS单位转换器？
在输入字段中输入数值，选择源单位（如px），所有其他单位（rem、em、%、vw、vh）的等效值将即时显示。您可以在设置面板中调整基础字体大小和视口尺寸以匹配您的项目配置。点击任何输出旁边的复制按钮，将CSS就绪值复制到剪贴板。
rem和em有什么区别？
rem和em都是基于字体大小的相对CSS单位，但它们引用不同的元素。rem始终相对于根元素（<html>）的字体大小，大多数浏览器默认为16px。em相对于父元素的字体大小。这意味着rem在整个页面上产生一致的大小，而em在元素嵌套时会复合。
为什么应该使用rem而不是px？
使用rem代替px可以提高可访问性和响应性。当用户更改浏览器的默认字体大小时，基于rem的布局会按比例缩放，而基于px的布局保持固定。这使您的网站对视觉障碍用户更加友好。
基础字体大小如何影响转换？
基础字体大小（默认：16px）决定了px和rem/em之间的关系。例如，在16px基础下：1rem = 16px，0.875rem = 14px，1.5rem = 24px。如果您的项目设置了不同的根字体大小，您应该更新此工具中的基础字体大小设置以获得准确的转换。
什么是视口单位（vw和vh）？
视口单位相对于浏览器窗口尺寸。1vw等于视口宽度的1%，1vh等于视口高度的1%。例如，在1920px宽的屏幕上，50vw等于960px。它们通常用于响应式全宽或全高布局、英雄区域和流体排版。
CSS中百分比（%）单位如何工作？
CSS中的百分比单位相对于父元素的相应尺寸。对于与宽度相关的属性，%相对于父元素的宽度。此工具根据配置的父元素宽度转换%，您可以在设置中调整以匹配您的布局上下文。
使用此工具时我的数据安全吗？
是的。此CSS单位转换器完全在您的浏览器中使用客户端JavaScript运行。不会将任何输入值或转换结果发送到任何服务器。您的数据始终保留在您的设备上。
代码示例
// CSS Unit Conversion Functions
function toPx(value, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return value;
case 'rem': return value * baseFontSize;
case 'em': return value * parentFontSize;
case '%': return (value / 100) * parentWidth;
case 'vw': return (value / 100) * viewportWidth;
case 'vh': return (value / 100) * viewportHeight;
}
}
function fromPx(px, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return px;
case 'rem': return px / baseFontSize;
case 'em': return px / parentFontSize;
case '%': return (px / parentWidth) * 100;
case 'vw': return (px / viewportWidth) * 100;
case 'vh': return (px / viewportHeight) * 100;
}
}
function convert(value, from, to, ctx) {
return fromPx(toPx(value, from, ctx), to, ctx);
}
// Usage
const ctx = { baseFontSize: 16, viewportWidth: 1440 };
console.log(convert(24, 'px', 'rem', ctx)); // 1.5
console.log(convert(2, 'rem', 'px', ctx)); // 32
console.log(convert(50, 'vw', 'px', ctx)); // 720