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

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 ...

I do know what web developers are interested in, however. They need CSS pixels. That is, the “pixels” that are used in CSS declarations such as width: 300px or font-size: 14px.

These pixels have nothing to do with the actual pixel density of the device. They’re essentially an abstract construct created specifically for us web developers.

It’s easiest to explain when we consider zooming. If the user zooms in, an element with width: 300px takes up more and more of the screen, and thus becomes wider and wider when measured in device (physical) pixels. In CSS pixels, however, the width remains 300px, and the zooming effect is created by expanding CSS pixels as much as is needed.

另见:

• A tale of two viewports — part one
• A tale of two viewports — part two