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

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 ，它鼓励设置视口(viewport)元标记，以便“屏幕的宽度将匹配设备独立像素，并确保所有不同设备的缩放和行为一致。” (强调是我的。)所以回到 Bootstrap 示例，即使单位说 px，它实际上可能指的是 pts 或 dps?

所有这一切——加上我对不同屏幕密度的 1x 到 4x 设计概念的平行调查——让我完全思考什么应该是一个基本问题。我是不是把它弄得比实际情况更复杂？而 dps 和 pts 只与原生开发相关，与响应式网页设计无关？ 媒体查询断点究竟引用了哪些单位？

Answer 1

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

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

In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.

因此，为了回答您的问题，基于像素的媒体查询——结合正确的 <meta name=viewport>标记设置 – 将引用渲染(相对于实际)像素。