css - 以英寸为单位的响应式网页设计断点？

Question

由于像素密度的增加，尤其是在手持/移动设备以及笔记本电脑中，使用英寸为响应式 CSS 定义断点是否有意义？

例如，如果默认情况下我有一个现有的移动优先布局，并且想要分别为 15.6 英寸笔记本电脑和更大的显示器指定样式，那么使用@media (min-width: 13in)是否有意义？（15.6 英寸对角屏幕 = 13 英寸宽）。这会导致任何问题，是否得到很好的支持？直观地说，基于屏幕的绝对大小而不是像素数来定义整体布局更有意义。

标签： cssresponsive-design

Answer 1

不幸的是，CSS 规范根据像素定义了英寸和毫米。在 CSS 中，1in = 2.54cm = 96px，所以这将仅在 96 ppi 的屏幕上显示为 1 物理英寸，但例如，iPhone X 有 463 ppi，如果您在 CSS 中指定宽度 = 1in；物理屏幕显示将只有 0.2 英寸宽！