断点如何在现代高分辨率设备上工作？答案

【问题标题】：How do breakpoints work on modern high resolution devices?断点如何在现代高分辨率设备上工作？
【发布时间】：2016-12-04 12:54:31
【问题描述】：

现代手机和平板电脑的分辨率非常高。

例如，我的 Galaxy S7 Edge 的分辨率为 1440 x 2560 像素。

移动设备的常见断点似乎在 768 像素左右，例如 bootstrap。

来自bootstrap.css的示例：

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

我的手机如何显示“响应式”版本的网站，尽管它的分辨率可以说比大多数桌面显示器都大？从示例中，我的手机似乎总是以“桌面”模式显示网站。

【问题讨论】：

标签： css responsive-design media-queries resolution

【解决方案1】：

来自文章A pixel is not a pixel is not a pixel...

不过，我确实知道 Web 开发人员对什么感兴趣。他们需要 CSS 像素。也就是说，CSS 声明中使用的“像素” 如width: 300px 或font-size: 14px。

这些像素与实际的像素密度无关设备。它们本质上是一个专门创建的抽象结构对于我们的网络开发人员。

当我们考虑缩放时，这是最容易解释的。如果用户缩放在中，带有width: 300px 的元素占据了越来越多的屏幕，因此在设备中测量时变得越来越宽（物理）像素。然而，在 CSS 像素中，宽度保持 300 像素，缩放效果是通过扩展 CSS 像素来创建的需要。

另见：

【讨论】：