断点如何在现代高分辨率设备上运行？

Question

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

例如,我的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;
  }
}

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

Answer 1

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

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

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

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

也可以看看：

• 两个视口的故事——第一部分
• 两个视口的故事——第二部分