Question

Bootstrap tutorial表示移动设备包含.col-xs-*（＆lt; 768px）。我的问题是，如果我使用.col-xs-*类为小型手机创建网站，那么该css规则将仅适用于宽度小于768px的设备。如今有全高清手机，宽度为1080px，5英寸显示屏。那么这些移动设备的行为就像我的bootstrap css的台式计算机（≥992px）一样吗？我希望我的css对于任何5英寸屏幕移动设备都是相同的，无论是高清还是全高清。

Answer 1

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) { ... }

代码直接从<{3}}借用。

您的屏幕有什么分辨率？

那么，您的浏览器如何确定哪些媒体查询相关？我们假设它有一个属性我想暂时致电magicalWidth。

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

现在，magicalWidth是什么？我可以告诉你，很可能不屏幕或浏览器窗口的宽度（物理）像素。 CSS使用逻辑像素的概念来计算任何度量，我们的magicalWidth正好是逻辑像素中设备或浏览器窗口的宽度。你可以很容易地自己测试一下，看看下面的例子：

＆＃13;

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

＆＃13;

如果您在计算机上完整地查看并放大，您会注意到布局如何变化，直到所有cols刚刚堆叠（即小显示器的默认行为），即使您没有＆＃39; t更改屏幕的分辨率或浏览器窗口的大小。

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

视口元标记

为此，它会创建一个虚拟视口，在其中呈现内容，然后将其缩放到屏幕大小。现在，您可以使用

决定该视口的大小

<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％的缩放级别呈现。

有关更深入的说明，请参阅official bootstrap docs。

物理和逻辑之间的比率

还有一个名为device-pixel-ratio的东西，用于确定物理和逻辑像素之间的比率。因此，例如，如果您的手机具有全高清屏幕且device-pixel-ratio为3，则其逻辑分辨率将为（1920/3）x（1080/3）= 640x360，并且远低于Bootstraps最低断点。如果device-pixel-ratio为2，则逻辑分辨率为960x540。

btw：您也可以在媒体查询中使用device-pixel-ratio：

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

底线

使用Bootstrap或其他一些响应式框架或您喜欢的媒体查询，让每个设备/浏览器弄清楚它们应该如何显示您的内容，很可能他们会把它做对（但这并不是'＃39> ; t表示你不应该进行测试以确保）

Answer 2

如果你仔细看到bootstrap需要meta tag named viewport

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

See the usage of this tag in Bootstrap

如果有人不使用此标记会怎样？

如果没有这个元标记，bootstrap就会像您在问题中解释的那样工作

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

现在，什么是设备宽度？

当你进入市场并购买分辨率为1080 * 1920的高清手机时，每个设备上都会有一个名为device pixel ratio的东西（范围从1,2,3,4等等）到高清设备的增加）。

如何计算设备宽度？

使用公式
计算设备宽度
device-width =实际宽度/设备像素比率

设备宽度将页面宽度设置为逻辑CSS pixels，大约为360px或480px。（现在每个手机都相同）

媒体查询在构建引导程序时使用的像素是什么？

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

没有视口元标记宽度为1080 CSS像素，但现在这个标签大约有360或480个CSS像素。

对于示例如果您购买的分辨率为 1920 * 1080 的Lenovo K3 Note，其设备像素比率为3，则设备宽度为

1080/3 = 360px

将设置为viewport元标记的width属性。

Answer 3

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

时，所有这些行为都相同

我的判决

参考The answer here和here

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

bootstrap如何在全高清（1920×1080）手机上运行？

3 个答案: