一篇文章告诉你 1px 等于多少 cm

本文解析了ppi、dp、pt、px、dpr等单位的概念,通过iPhone7实例说明了物理像素、逻辑像素、dpr及ppi的计算方式,探讨了不同设备上网页内容如何适配的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ppi、dp、pt、px、dpr、vw、rem、em、物理像素、逻辑像素……懵就对了!

结论

明白结论说什么的,可跳过此文

以下物理大小单位为 inch:

  1. 物理像素的物理大小 = 1/ppi
  2. 1dp 物理大小 = ppi/160 * 1物理像素物理大小 = ppi/160 * 1/ppi = 1/160
  3. 1 css逻辑像素物理大小= dpr * 1物理像素物理大小 = dpr * 1/ppi
  4. 当 ppi 和 dpr 正相关时,1 css逻辑像素物理大小不变,此时,css 逻辑 px 和 android dp 和 ios pt 类似

名词解释

以一个例子来看这些名词:iphone7 分辨率 750*1334,ppi 326,尺寸 4.7 inch,浏览器未缩放的视口大小 375*667,dpr 2

  • 物理像素,设备能控制显示的最小物理单位,iphone7 分辨率 750*1334 指的是物理像素
  • 逻辑像素,虚拟的,css 使用的就是逻辑像素,视口大小 375*667 说的是逻辑像素
  • dpr,Device Pixel Ratio,dpr = 物理像素数 / 逻辑像素数
  • 设备尺寸,指设备对角线长度,如 4.7 inch
  • ppi,像素密度,每英尺像素数,计算方式:物理像素数/设备物理大小,对于 iphone7: (750^2+1334^2)^0.5 / 4.7 = 326
  • dp,密度无关像素,android 使用较多,是 160 ppi 下 1 个物理像素的物理尺寸

物理像素的物理大小

参照 ppi 可知:
物理像素的物理大小 = 设备物理大小/物理像素数 = 1/ppi

1dp 物理大小

1dp 物理大小 = ppi/160 * 1物理像素物理大小 = ppi/160 * 1/ppi = 1/160 inch = 0.00625 inch = 0.015875 cm = 0.15875 mm

css 1px 物理大小

1 css逻辑像素物理大小= dpr * 1物理像素物理大小 = dpr * 1/ppi
对于 iphone 来说,如果 dpr 是 2,1px = 2 * 1/326 = 0.006135 inch = 0.01558 cm = 0.1558 mm,跟 1dp 差不多

h5 适配

本文是看 h5 适配方案的副产品,最后提一下,根据以上推断,可认为:
当 ppi 和 dpr 正相关时,1 css逻辑像素物理大小不变,此时,css 逻辑 px 和 android dp 和 ios pt 类似
此时,h5 适配只需要根据视口大小调整 css 像素进行缩放(淘宝现在采用的方案?)

后记

对各种单位的理解一直比较模糊,今据搜索信息做点计算、推断,如有错误请多指教。

<think>嗯,用户问的是1rem等于多少px,这应该跟CSS中的单位转换有关。首先,我需要回忆一下rem和px的定义。rem是“root em”,相对于根元素(也就是HTML元素)的字体大小。而px是像素单位,绝对单位,但实际显示可能会根据设备缩放有所变化。 那默认情况下,根元素的字体大小是多少呢?我记得大多数浏览器的默认字体大小是16px。所以如果没有人为设置html的font-size,1rem应该等于16px。但用户可能想知道的是,如果在不同的设置下,这个值会不会变化。比如,如果开发者把html的font-size设为10px,那么1rem就等于10px。这时候可能需要用百分比或者em来调整,以保持响应式设计。 不过用户可能只是想了解基本的换算关系,所以应该先给出默认情况下的答案,再解释可能的变化情况。同时,可能需要提醒用户在实际开发中如何设置根字体大小,或者使用相对单位的优势,比如响应式布局中的便利性。 还有,要注意rem和em的区别,em是相对于父元素的字体大小,而rem始终相对于根元素,这可能也是用户潜在的问题点。不过用户的问题集中在rem和px的转换,所以先专注于这一点。 另外,可能需要提到不同的浏览器或设备可能有不同的默认字体大小,但现代浏览器通常默认是16px。为了确保一致性,很多开发者会重置根元素的字体大小,比如设置为62.5%,这样1rem就等于10px(因为16px的62.5%是10px),方便计算。 总结一下,回答的结构应该是: 1. 默认情况下1rem = 16px。 2. 这个值取决于根元素的字体大小设置。 3. 开发者可以自定义根字体大小来改变rem的值。 4. 可能提到常见的做法,如设置62.5%来简化计算。</think>在 CSS 中,**1rem 等于根元素(即 `<html>` 标签)的字体大小**。默认情况下,绝大多数浏览器的根字体大小是 **16px**,因此: $$1rem = 16px \quad (\text{默认情况下})$$ --- ### 关键点说明: 1. **rem 的特性** - `rem` 是相对单位,始终基于根元素(`<html>`)的 `font-size` 计算。 - 如果未手动修改根字体大小,则默认 `1rem = 16px`。 2. **自定义根字体大小** 开发者可以通过 CSS 修改 `<html>` 的 `font-size`,例如: ```css html { font-size: 20px; /* 此时 1rem = 20px */ } ``` 3. **常见实践** 为简化计算,许多开发者会设置: ```css html { font-size: 62.5%; /* 16px × 62.5% = 10px1rem = 10px */ } ``` 这样 `1rem = 10px`,便于直接换算(例如 `1.6rem = 16px`)。 --- ### 总结: | 单位 | 换算关系 | 说明 | |------|----------|------| | `1rem` | 默认 `16px` | 基于 `<html>` 的 `font-size` | | 自定义 | 任意值 | 通过修改 `html { font-size: ... }` 调整 | 实际开发中建议使用 `rem` 实现响应式布局,避免依赖固定像素值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值