响应式网页设计断点引用了哪些单元？

Question

当在 CSS 中为响应式网页设计设置断点时，媒体查询会检查设备的宽度，以便适当地显示不同的布局。正如我所理解的那样，媒体查询中的像素单元引用了我们在设备规格中常见的渲染像素分辨率。例如，640 x 1136px 的 iPhone 5 或1080 x 1920 的 Nexus 5。

但现在我很困惑，断点是指设备的点（对于 iOS）还是与密度无关的像素（对于 Android）。 这个问题很大程度上源于我经常看到引用常见断点的方式，其中为手机、平板电脑和桌面屏幕定义了存储桶。例如，这来自Bootstrap’s documentation：

// Extra small devices (portrait phones, less than 544px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

但请稍等。三星 Galaxy 系列现在有几款分辨率为1440 x 2560 的手机。有了上面的断点，这些更高分辨率的手机将被视为台式机，不是吗？甚至 iPhone 6 Plus 也可以作为台式机使用。这不可能。

虽然我知道根据内容而非设备定义断点是最佳实践，但 Bootstrap 示例代表了一个看似普遍的想法，即纵向手机、横向手机、平板电脑和台式机都应该有断点……但是如果我们谈论rendered pixels，所有肖像手机的单一存储桶没有意义，因为仅在该类别中就有如此多的设备尺寸多样性！

最后，我还找到了this kinda related post，它鼓励设置视口元标记，以便“屏幕的宽度将与设备无关的像素匹配，并确保所有不同的设备都应缩放和运行始终如一。” （重点是我的。）所以回到 Bootstrap 的例子，即使单位说px，它实际上可能指的是pts 或dps？

所有这一切——加上我对不同屏幕密度的 1x 到 4x 设计概念的平行调查——让我对这应该是一个基本问题感到完全困惑。我是不是把它弄得比现在更复杂？而dps 和pts 仅与本机开发相关而不是响应式网页设计？ 媒体查询断点具体引用了哪些单位？

Answer 1

来自您在问题中引用的同一篇文章：

Stack Overflow– “Should I use max-device-width or max-width?”

就媒体查询而言，您可能希望使用max-width 而不是max-device-width，因为max-width 将针对视口（当前浏览器窗口），而max-device-width 将针对设备的实际全屏大小/分辨率。

因此，为了回答您的问题，基于像素的媒体查询——结合正确的<meta name=viewport> 标签设置——将引用渲染（而不是实际）像素。