如何在现代高分辨率设备上使用断点？ [英] How do breakpoints work on modern high resolution devices?

问题描述

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

Modern phones and tablets have very high resolutions.

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

My Galaxy S7 Edge, for example, has a resolution of 1440 x 2560 pixels.

移动设备的常见断点似乎大约为768像素，例如引导。

Common breakpoints for mobile devices seems to be around 768 pixels, such as in bootstrap.

bootstrap.css ：

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

我的手机如何显示版本的网站，即使它的分辨率可以说比大多数台式机显示器大吗？从示例中，看起来我的手机将始终以桌面模式显示网站。

How is it that my phone displays the "responsive" version of websites even though it's resolution is arguably larger than most desktop monitors? From the example, it would seem my phone would always display the site in "desktop" mode.

推荐答案

href =http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html =nofollow> 像素不是像素不是像素 a> ...

From the article A pixel is not a pixel is not a pixel...

但我知道web开发者感兴趣的是什么。他们需要
CSS像素。也就是说，在CSS声明
中使用的像素，例如 width：300px 或 font-size：14px 。

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

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.

当我们考虑缩放时最容易解释。如果用户缩放
，则具有 width：300px 的元素占用了越来越多的
屏幕，因此当测量时变得越来越宽in device
（physical）pixels。但在CSS像素中，宽度仍为300像素，
，缩放效果是通过扩展CSS像素创建的，需要
。

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

这篇关于如何在现代高分辨率设备上使用断点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！