use*_*782 22 html css browser pixel css3
1 px = 1/96th in 1 in
在我以前的18.5英寸的屏幕,screen.width是1367 px和英寸屏幕宽度14 inches.按W3C公式:
14 * 96 px = 1344 px
W3C公式偏离了20/14 px per inch.由于偏差太小,1 inch在我的屏幕上97.4 px我接受了W3C公式,并且认为CSS像素是一个absolute unit of measure,意味着它总是等于0.75 pt(物理单位).
这一周,我买了一台21.5英寸全高清屏幕,它具有宽度19 inches和screen.width是1920 px.所以现在1 inch在我的屏幕上是:
1920/19 ~ 101 px
不仅如此,我朋友的屏幕是24英寸,并具有相同的1920 x 1080分辨率.24英寸和21.5英寸都不能对应相同数量的CSS像素.
所以现在,在我的屏幕上,CSS像素不是绝对的测量单位.屏幕上的一切都相对较小.即便如此,现在我被我的字体大小所迷惑.当我在屏幕上找到16 px作为最小可读字体时,它在较小的屏幕上实际上更大.因为16 px我的屏幕14px在我以前的小屏幕上的厘米与厘米相同.我设计我的网站错了,我不再是一个好的前端开发人员了.
所以问题是:
Jam*_*lly 13
正如您已经链接的CSS值和单位模块的部分稍微指出的那样,有两种不同的实现可以应用于CSS:
对于CSS设备,这些维度也是固定的
一世.通过将物理单位与其物理测量相关联,或
ii.通过将像素单元与参考像素相关联.
这继续注意:
如果锚单元是像素单元,则物理单元可能与其物理测量不匹配.或者,如果锚单元是物理单元,则像素单元可能不映射到整数个设备像素.
最后,它得出结论:
参考像素是设备上一个像素的视角,像素密度为96dpi,距离读取器的臂长度.对于标称臂长28英寸,视角因此约为0.0213度.对于手臂长度的读数,1px因此对应于约 0.26mm(1/96英寸).
这意味着像素单元是绝对长度,但是其长度可以根据设备是否应用来自我在此引用的第一部分的实现i或实现ii来改变.
由CSS值和单位模块定义的绝对长度仅仅是"锚定到某些物理测量"的长度.物理测量将是它们的实际物理长度或由参考像素导出的长度.
特定部分的同一部分也说:
对于打印介质和类似的高分辨率设备,锚单元应该是标准物理单位之一(英寸,厘米等).对于分辨率较低的设备和具有不寻常观看距离的设备,建议将锚单元作为像素单元.对于这样的设备,建议像素单元参考最接近参考像素的设备像素的整数.
96px 并不总是等于1英寸.
CSS 像素单位不一定是物理像素测量，（在我的回答中，我正在解决屏幕的 css px 而不是打印）
对于 CSS 设备，这些尺寸要么通过 (i) 将物理单位与其物理测量相关联，要么 (ii) 通过将像素单位与参考像素相关联来锚定。
在上面的解释中，参考像素解释如下
参考像素是像素密度为 96dpi、与阅读器距离为一臂长度的设备上一个像素的视角。对于 28 英寸的标称臂长，视角约为 0.0213 度。因此，对于在手臂长度处读取，1 像素相当于约 0.26 毫米（1/96 英寸）。
更多解释在这里
物理像素 750 X 1334
CSS 像素 375 X 667
正如您所看到的，物理 px 测量值与 Css px 完全不同。实际物理像素与CSS像素之间的比率称为像素比，它是根据观看角度、观看距离和显示分辨率确定的。
最终，硬件供应商根据上述方面进行了设置。
这里是包含 phy px 、 css px 及其像素比的设备列表的链接。
所有这一切的目标是在不同的硬件上获得更一致的显示。
最后，正如 w3.org 的文档指出的那样：
请注意，像素单位和物理单位的定义与以前版本的 CSS 不同。特别是，在 CSS 的早期版本中，像素单位和物理单位并不以固定比率相关：物理单位始终与其物理测量值相关，而像素单位会变化以最接近地匹配参考像素。（进行此更改是因为太多现有内容依赖于 96dpi 的假设，打破该假设就会破坏内容。）
在早期版本中，CSS 像素在很大程度上基于参考像素，该参考像素基于其始终为 96dpi 的假设。这里，css px 和 phy px 通过像素比相关。
希望这可以帮助。