Question

在CSS中为响应式Web设计设置断点时，媒体查询会检查设备的宽度，以便可以正确显示不同的布局。正如我所理解的那样，媒体查询中的像素单元引用了我们在设备规格中常见的渲染像素分辨率。例如，位于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或{{1} }？

所有这一切 - 再加上对我的不同屏幕密度的1x到4x设计概念的平行调查 - 让我完全了解它应该是一个基本问题。我是否认为这比它更复杂？ dps和dps仅与本机开发相关，而不是响应式网页设计？ 引用媒体查询断点的确切单位是什么？

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>标记设置相结合 - 将引用呈现（而非实际）像素。

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

1 个答案: