什么是CSS单位转换器？
CSS Unit Converter 在 CSS 用于大小类型和布局的单元之间转换一个长度:px、rem、em、pt 和 %。它的存在是因为现代响应式设计依赖于相对单元 - rem 和 em 比例以及用户的字体大小设置和缩放 - 而设计模型和旧样式表通常以固定像素表示。该工具采用 24px 之类的值,并一次显示为 1.5rem、1.5em、18pt 和 150%,并且从单个字段向各个方向工作。
换算都取决于一个数字:根(基)字体大小,默认为 16px,因为这是 html 元素的浏览器默认值。一个 rem 总是等于那个基字体大小,所以在 16px 时,值 16px 为 1rem,24px 为 1.5rem,8px 为 0.5rem。点与 CSS 参考像素绑定 - 1 英寸为 96px 和 72pt - 所以 1pt 等于 96/72,大约 1.333px。百分比被视为基字体大小的一部分,因此 100% 等于基字,50% 等于其一半。
1次转换都需要两个步骤,工具首先通过将你的输入乘以一个输入单元中的像素数,将该像素值除以一个目标单元中的像素数,在18px的基数下,27px变成27÷18 = 1.5rem,在任意一个基数12pt变成12×96÷72 = 16px,结果四舍五入到最多小数点后四位,所以在16px的基数下15px读取0.9375rem,vw和vh等视口单元不是转换器的一部分,因为它们取决于窗口大小而不是字体大小,基字体大小为零或更少会回落到16px。
Everything 随你键入在浏览器中运行,因此在服务器上没有上传和等待,更改基本字体大小,为设置自己的字体大小的组件建模,在每个单元中读取结果,并复制您需要的内置 px-to-rem 表格,为您提供一个随时可用的参考,以了解在类型尺度中出现最多的大小。
如何使用CSS单位转换器？
输入一个值并选择其单位
Type你要转换的数字,选择它当前所在的单位-px, rem, em, pt, or %,你也可以用它的单位粘贴一个值,像24px,工具会为你读取单位。
设置基本字体大小
如果您的项目使用的不是 16px 浏览器默认值，则调整根字体大小。 这控制了 REM、EM 和 % 与像素的关系。
一次阅读每个单元
转换器立即显示所有支持的单位的等效值，每个单位都有其单位后缀，因此您可以将其直接放入 CSS 中。
复制或使用参考表
一键复制任何结果，或扫描 PX-to-REM 参考表以获取印刷比例的常见尺寸。
主要特点
每个单元一次
输入一个值并立即查看 PX、REM、EM、PT 和 % 的值，每个都使用其单位进行格式化，以便您可以将其直接粘贴到样式表中。
可配置的基本字体大小
根字体大小是可调节的,因此 rem、em 和 % 转换与您的项目相匹配 - 无论您使用 16px 默认值、10px"62.5%"技巧还是组件级别字体大小。
两路，任意方向
"从"和"到"没有固定的,从单个输入将px转换为rem,rem转换为px,px转换为em,或pt转换为px-任何单位到任何单位-。
PX-TO-REM 参考表
内置表格列出了在类型比例尺中出现最多的像素大小的 REM、EM、PT 和 % 等效值，因此您可以在所选的基础上查看整个比例尺。
Frequently Asked Questions
Related Tools
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!