问bootstrap在全高清(1920×1080)手机上是如何工作的？

EN

TL;DR

CSS像素不等于物理像素。让每个设备/浏览器弄清楚他们应该如何显示你的内容，他们很可能会做对。

偏移: Bootstraps媒体-查询

首先，让我们看看Bootstrap是如何工作的。在标准bootstrap.css中的某个地方，您可以找到以下代码(为简单起见，略微修改和缩短)：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

代码是直接从official bootstrap docs借来的。

你的屏幕分辨率是多少？

那么，您的浏览器如何确定哪些媒体查询是相关的呢？让我们假设它有一个属性，我现在将其命名为magicalWidth。

然后，您的浏览器会将magicalWidth与@media (min-width: @screen-sm-min)进行比较，如果magicalWidth大于或等于@screen-sm-min，则会考虑{ ... }中的所有定义，否则将忽略它们。所有其他媒体查询也是如此。

现在，什么是magicalWidth？我可以告诉你，它很可能是，而不是以(物理)像素为单位的屏幕或浏览器窗口的宽度。CSS使用逻辑像素的概念来计算任何度量，上面的magicalWidth就是您的设备或浏览器窗口的逻辑像素宽度。你可以很容易地自己测试一下，看看下面的例子：

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#f00;">Test 1</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#ff0;">Test 2</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0f0;">Test 3</div>
  <div class="col-sm-6 col-md-4 col-lg-3" style="background-color:#0ff;">Test 4</div>
</div>

​

如果你在你的电脑上全景查看并放大，你会注意到布局是如何变化的，直到所有的cols都只是堆叠在一起(即小显示器的默认行为)，即使你没有改变屏幕的分辨率或浏览器窗口的大小。

同样的事情也适用于你的手机:在渲染内容时，你的浏览器不使用物理像素，而是使用逻辑像素来确定屏幕的大小。

视口meta-tag

为此，它创建了一个虚拟视口，在那里它呈现内容，然后将其缩放到屏幕的大小。现在，您可以使用以下命令确定该视口的大小

<meta name="viewport" content="width=...">

...可以是固定大小，例如

<meta name="viewport" content="width=600">

将导致渲染所有内容的虚拟视口的宽度为600px。...也可以是特殊大小的device-width，这意味着在逻辑像素上，视区将与屏幕一样宽。Bootstrap建议使用以下视口标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

所以我们有了width=device-width。另一部分initial-scale=1意味着你的页面最初应该以100%的缩放级别呈现。

有关更深入的解释，请参阅MDN article on viewport。

物理和逻辑之间的比率

还有一种叫做device-pixel-ratio的东西，它决定了物理像素和逻辑像素之间的比例。例如，如果您的手机是全高清屏幕，device-pixel-ratio为3，其逻辑分辨率将为(1920/3)x(1080/3) = 640x360，这远远低于Bootstraps的最低断点。如果device-pixel-ratio为2，则逻辑分辨率为960x540。

顺便说一句:你也可以在媒体查询中使用device-pixel-ratio：

@media (min-device-pixel-ratio:2) { ... }

底线

随心所欲地使用Bootstrap或其他响应式框架或您自己的媒体查询，让每个设备/浏览器找出它们应该如何显示您的内容，它们很可能会正确(但这并不意味着您不应该运行测试来确保)

如果您仔细查看bootstrap需要一个meta tag named viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

See the usage of this tag in Bootstrap

如果有人不使用这个标签怎么办？

如果没有这个元标记，引导程序将像您在问题中所解释的那样工作

现在，如果您看到meta标记，就会有一个名为width的属性被设置为device-width。

现在，什么是设备宽度？

当你去市场买一部分辨率为1080*1920的高清手机时，每个设备都会有一种叫做device pixel ratio的东西(范围从1,2,3,4等等，高清设备的增加)。

如何计算设备宽度？

设备宽度使用公式计算

device-width=实际宽度/设备像素比率

Device- CSS pixels将页面宽度设置为逻辑宽度，大约为360px或480px。(瞧，现在每个电话都一样了)

媒体查询使用多少像素来构建引导程序？

媒体查询使用CSS像素，现在改为360*480。

在没有viewport meta标记的情况下，有1080个CSS像素的宽度，但是有了这个标记，现在大约有360或480个CSS像素。

以为例，如果您购买了一台分辨率为1920*1080的联想K3笔记本，其设备像素比率为3，则设备宽度将为

1080/3 = 360px

其将被设置为视口元标签的宽度属性。

5英寸可以在y轴上平移到480px。任何5英寸的移动显示器通常都小于768px。尺寸不计算屏幕分辨率，而是实际尺寸。我有一部5英寸屏幕的1080全高清android手机和一部540x960像素的低分辨率android手机，它是4.3英寸的屏幕，可以转换为y轴上的412.8px。当我使用.col-xs-* bootstrap css时，它们的行为方式都是一样的。

​

裁决My

​

关于The answer here和here

我的理解是CSS断点依赖于设备宽度，而不是屏幕分辨率。