第一次有设计师递给我一个规格,上面写着"body text 16px,标题 28px,小字 13px"前端领导说"但我们把所有东西都运送到rem,"我在计算器应用程序中手工进行了除法。十六分之十六是一,十八分之十六是一点七五,十三分之十六是零点八一二五。然后基本字体大小改为十个像素,用于在不同的项目上设置"62.5%",我又做了一切。第三次之后,我在toolz。dev工作流程中构建了一个小型转换器,它悄悄地使我从此后几乎所有我设计的组件上都避免了算术错误。
TL;博士: CSS 单元转换器将一个单元中的值 - px、rem、em、pt 或 % - 转换为其他每个单元中的等效值, 根据您控制的根字体大小(默认情况下为 16px), 要将 px 转换为 rem, 请将像素除以根字体大小:
24px ÷ 16 = 1.5rem.反之,乘:1.5rem × 16 = 24px. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 CSS 单位转换器 立即为每个单元同时执行此操作,完全在浏览器中运行,并包含一个可以从 px 到 rem 的参考表。
本指南涵盖了单位之间的关系、为什么基本字体大小如此重要、每个单位何时到达以及转换器运行的确切数学。我设计了很多跨 WordPress 主题的界面、WP Adminify admin UI 和 React 仪表板,并且所有单元问题都出现了。规则很简单,一旦您看到单个数字,一切都会挂在上面。
为什么 px 到 rem 的转换很重要?
Pixels几乎是每一个设计工具导出的单位,Figma、Sketch、Photoshop都是用像素来思考的,所以切换规格就是像素值的列表,像素也很容易推理,因为一个CSS像素是一个固定的参考大小,用户调整任何东西时都不会改变。
这种固定性正是可访问的、响应式界面的问题。当有人增加浏览器's默认字体大小时- 许多视力低下的人依赖的设置- 以固定像素大小的文本完全忽略了以rem大小的文本,用它缩放。浏览器在一些较旧的配置和用户样式表上缩放也是如此。如果您希望排版尊重读者's偏好,则将其大小设置为相对单位,rem是整个页面中表现可预测的。
所以常见的工作流程是:以像素设计,以 rem 形式运输。这让你整天都在做除法,而除法就是小错误蔓延的地方。写作 0.8125rem 代替 0.875rem for a 13px值是那种运送到生产,使一个标签看起来微妙错误的错字,转换器消除了这种风险,这就是我保持一个触手可及的全部原因,如果你在很多这些任务中工作,越广泛 web开发人员工具包 涵盖单位转换与其他日常工作相匹配的地方。
Px、rem、em、pt、%有什么区别?
这些单元中的每一个在渲染时都会解析为多个 CSS 像素,这是一种关系 CSS 值和单位级别 4 pins down:参考像素是针对一个96 dpi的显示屏定义的,而不是针对你的屏幕,区别就是它们所针对的。
px 是CSS参考像素,它是一个绝对单位,在某种意义上,它不依赖于任何字体大小。 1px 於 1px。这使得它可以预测,但对用户偏好也无反应。
雷姆 意思是"根em。"一个 rem 等于根元素的字体大小 - the html element。默认情况下是 16px,所以 1rem 於 16px、 1.5rem 於 24px、和 0.5rem 於 8px。因为总是绑在根上,rem值在文档中到处都意味着相同的东西,无论元素嵌套得有多深。
em 是相对于的字体大小 当前 element。如果一个元素's字体大小是20px,那么 1em 里面是20px, 1.5em 30px为,以此类推,捕获的是 em 复合:如果一个父集 font-size: 1.2em 还有一个孩子也出发了 1.2em,孩子's有效大小是祖父母的1.2 × 1.2。这个工具假设一个元素大小在基数,所以em和rem读取相同-你通过将基数字体大小设置为该元素来建模特定的em上下文's大小。
pt is the point, 承袭自印刷排版, CSS定义一寸为96像素72点, 所以 1pt 等于 96/72 ≈ 1.333px,并且 1px equals 0.75pt。积分属于打印样式表;在屏幕上它们只是参考像素的固定倍数。
% 对于字体大小,是父字体(或者在词根处为基数)的百分比。 100% 等于参考大小和 50% 等于它的一半。在 16px 的基数下, 100% 是 16px 和 150% 是24px。
以下是默认 16px 根处的公共值排列方式:
| px | 雷姆 | em | pt | % |
|---|---|---|---|---|
| 12绔 涔诲芥澶澧 | 0.75 | 0.75 | 9 | 75绔 涔诲芥澶澧 |
| 14绔 涔诲芥澶澧 | 0.875 | 0.875 | 10.5 | 87.5 |
| 16绔 涔诲芥澶澧 | 1 | 1 | 12绔 涔诲芥澶澧 | 100 |
| 18绔 涔诲芥澶澧 | 1.125 | 1.125 | 13.5 | 112.5 |
| 24绔 涔诲芥澶澧 | 1.5 | 1.5 | 18绔 涔诲芥澶澧 | 150绔 涔诲芥澶澧 |
| 32绔 涔诲芥澶澧 | 2 | 2 | 24绔 涔诲芥澶澧 | 200 |
的 CSS 单位转换器 为您设置的任何底座生成整个表格,以便您可以同时查看整个类型的刻度。
基本字体大小如何改变一切?
基(根)字体大小是每个相对单位的枢轴,改变它,每个rem,em,%转换都随之改变,而px和pt保持原位。
16px的浏览器默认,这就是为什么 1rem 是正常的 16px。但你可以设置根到任何东西。流行的模式集 html { font-size: 62.5%; }(16的62.5%),这使得根为10px,现在 1rem 是干净的 10px并且 rem 数学变为 "移动小数点 ":1.6rem 为 16px,2.4rem 为 24px,0.8rem 为 8px。团队采用此功能,因此样式表中的数字读取几乎像像素,同时仍然根据用户偏好进行缩放。
To建模 that 在转换器中,将基本字体大小设置为 10 并读取 rem 列,现在一个 24px 值显示为 2.4rem 而不是 1.5rem,这也是您在设置自己字体大小的组件中推理 em 的方式:如果卡片设置 font-size: 20px么,那么它内部的em值是相对于20的,所以把底数设置为20,看看是什么 1.5em 决心。
我最常看到的错误是忘记了值是根据哪个基数计算的。有人将 24px 转换为 1.5rem,假设 16px 根,然后将其放入运行 62.5% 技巧的项目中,其中根为 10px - 并且 1.5rem 有 15px,而不是 24px。单位是相对的,因此该数字仅表示一旦您知道该基数,每当我在项目之间粘贴 rem 值时,我都会首先检查根字体大小。
如何手动将 px 转换为 rem,将 rem 转换为 px?
数学是一除一乘。
px 到 rem: 将像素值除以根字体大小。
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem 到 px: rem值乘以根字体大小。
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px 到 em 当元素位于基本字体大小时,使用与 rem 相同的公式,因此 24px ÷ 16 = 1.5em。差别是概念性的,而不是算术性的:em是针对当前元素测量的,所以如果那个元素's大小与根不同,你就用它的大小作为底。
px 至 pt: 0.75相乘,因为 1px = 0.75pt.所以 16px × 0.75 = 12pt。反其道而行之, pt × 1.333 = px。
px 至 %: 除以底数乘以 100。所以 24px ÷ 16 × 100 = 150%。
这一切都不难,但在设计组件时做四十次就是疲劳产生错别字的地方。这正是那种重复、容易出错的任务 开发人员生产力工具 哲学说自动化 - 卸载算术,以便您的注意力集中在设计上。
您应该何时使用每个单元?
没有一个正确的单位;每项工作都有一个正确的单位。
使用 rem 了解字体大小。 这是列表中最强的推荐。Rem 与用户缩放's 浏览器字体大小偏好,这是真正的可访问性胜利,并且由于它锚定在根上,因此不会意外复合。大多数团队都将所有类型缩放为 rem。
使用 rem 或 px 进行间距,具体取决于您的系统。 许多设计系统都以 rem 表示边距和填充,以便与类型进行间距缩放。其他系统则以 px 为单位保持间距,以实现像素完美的布局。两者都是可防御的;选择一个并保持一致。
使用 em 来表示应该使用自己的元素进行缩放的事物。 Padding on a button that should grown with the button's 字体大小是 em 的经典用途- 在 em 中设置 padding,它会自动跟踪文本,相对于相邻文本的图标大小是另一个。
使用 px 来获取边框和精细细节。 甲 1px 边境通常应该停留 1px;你很少希望发际线与字体大小缩放。媒体查询断点也经常用 px 编写,尽管有些人更喜欢那里的 em 进行缩放行为。
仅在打印样式表中使用 pt。 如果你正在为某件事设计造型 @media print、点数是打印的原生单位,值得使用,在屏幕上,偏好px或rem。
使用 % 表示流体宽度,偶尔使用字体大小。 布局中无处不在的百分比(width: 50%的),而作为字体大小,它有时会在 62.5% 技巧的根处使用。
CSS单元常见的错误有哪些?
1是已经描述过的基差问题:对错误的根字体大小进行转换,在信任rem数之前,始终知道你的根。
2个是超精确的rem值,有些转换不平均划分-16px基数下的15px是0.9375rem,13px是0.8125rem,那些长小数是精确但丑陋的,四舍五入太难(比如说0.94rem)将渲染的大小移动了几个像素,我的规则:为rem保留三到四个小数,或者选择整洁划分的基数和大小值,转换器明智地四舍五入,并修剪掉尾随的零所以 24px 读作 1.5rem 而不是 1.5000rem。
em 复合,第三个是每个设置 em 字体大小的嵌套元素会乘上效果,所以一个深度嵌套的项目最终会远大于或小于预期,如果你发现 em 令人惊讶,那么复合几乎总是为什么 - 将那些切换到 rem,惊喜就会消失。
4是假设pt和px是可互换的,它们不是; 12pt 於 16px不是 12px。将它们混合在横跨屏幕和打印的样式表中是一个微妙的错误。
Toolz。dev 转换器如何处理数学?
器(converter)在引擎盖下使用一个想法:将每个单元表示为多个像素,然后通过像素进行转换每个单元都有一个固定的"每单位像素"给定基本字体大小- px为1,rem和em为基数,pt为96/72,%为基数/100,要进行转换,它将输入乘以其单位's每单位像素得到一个像素值,然后除以目标单位's每单位像素。那个单遍一次给出每个单元,这就是为什么你在键入时看到px,rem,em,pt和%一起更新。
它还解析附加单位的值,因此粘贴 24px 为您填写数字和单位。结果四舍五入到小数点后几位,并删除尾随零以获得可读性,并且每个结果都有一个一键复制按钮,可以用其单位后缀复制值,准备粘贴到 CSS 中。一切都运行客户端 - 您输入的任何内容都不会上传 - 这与 隐私优先的方法 站点上每个工具的后面。
如果您还为同一组件选择颜色或构建阴影,则 CSS 梯度生成器 並 盒子阴影生成器 只需点击一下即可直播,范围更广 单位转换器 CSS之外的工作时处理物理单元,如长度和重量。
常见问题
如何将 PX 转换为 REM？
将像素值除以根字体大小。 在浏览器默认为 16px 时，rem = px ÷ 16，所以 16px 为 1rem，24px 为 1.5rem，8px 为 0.5rem。 在转换器中输入像素值，REM 等效物会以您设置的任何基本字体大小立即显示。
如何将rem转换为px？
将 REM 值乘以根字体大小。 在 16px 底座处，px = rem × 16，因此 1rem 为 16px，1.5rem 为 24px，0.75rem 为 12px。 如果您的 HTML 元素使用不同的值，则在工具中更改基本字体大小。
默认的根字体大小是多少？
浏览器默认将 html 元素设置为 16px,这就是为什么这个转换器从 16 开始的原因。因为 1rem 总是等于根字体大小,所以默认情况下 16px 恰好等于 1rem。用户可以更改浏览器's 默认文本大小,这是 rem 优先于可访问、可扩展的排版的原因之一。
rem和em有什么区别？
A rem总是相对于根html字体大小,所以在整个页面中保持一致,一个em是相对于当前元素的字体大小,所以在嵌套元素各自设置自己的大小时可以复合,在工具中设置基本字体大小来建模特定的em上下文。
px和pt在cs中如何关联？
CSS定义一寸为96像素72点,所以1pt等于96/72 ≈ 1.333px,1px等于0.75pt 点数来自打印排版;屏幕上为CSS参考像素的固定倍数,屏幕工作用px或rem,打印样式表用pt预留。
62.5%字体大小的绝招是做什么的?
html字体大小设置为62.5%,使得根字体大小为10px,因此1rem变成方便的10px,rem数学变成移动小数-1.6rem为16px,2.4rem为24px,要在转换器中对此进行建模,将基本字体大小设置为10,并读取rem列。
我应该使用 px 还是 rem 来表示字体大小？
Rem通常更喜欢字体大小,因为它与用户一起缩放's浏览器字体大小偏好,这提高了可访问性,而固定px则不然,许多团队在px中设计,并为最终的CSS转换为rem,像边框这样的布局细节通常停留在px中。
为什么转换后的值有时会有长小数？
16px 底数下的 15px 有些转换并不精确 - 0.9375rem,pt 值经常会产生重复的小数,工具会四舍五入到小数点后几位,并修剪掉零位后可读性,对于像素完美的布局,将 rem 值四舍五入到小数点后两到三位或选择一个可以干净地划分尺寸的底数。
