Question

布尔玛和我认为Bootstrap的媒体查询具有最大宽度。

为什么不只是将宽度设置为屏幕尺寸的百分比，然后保留呢？

Answer 1

对于每个MDN's documentation on media queries，只有一些专用于尺寸的功能：width，height，device-width和device-height。

过去，device-width和device-heigth可用于媒体查询，从理论上讲，它们可以用于您要尝试的操作，但这有since been deprecated，并且必须不能在新代码中使用。

剩下width和height，它们取一个“长度”值。

每MDN's documentation on "length"，没有与屏幕/显示器相对应的长度单位。

有“绝对长度单位”，它们会尽可能与实际长度相匹配，或者在接近时与实际长度相匹配。例如，1px是1/96英寸，或者在低分辨率屏幕上是1个设备像素。

存在“相对字体长度”，相对于当前字体中特定字符或字体属性的大小。例如，1em等于元素（或在font-size属性上指定时的父元素）的当前字体大小。

最后，存在相对于视口大小的“视口百分比长度”。尽管有时会将其与屏幕/显示器的大小混淆，但实际上这是文档可见部分的大小：浏览器专用于显示网页的部分。因此，1vw将是页面可见部分宽度的1％，而100vw将是页面可见部分宽度的。使用iframe时，“视口”是iframe的大小。您可以在下面看到这一点：

<code style="background: yellow; display: block; width: 50vw; height: 50vh">
  background: yellow;<br>
  display: block;<br>
  width: 50vw;<br>
  height: 50vh
</code>

您还可以在CSS的其他位置使用percentages，但所有这些操作都将继承值（父级值）乘以该百分比。也就是说，如果父级的宽度为100px，而子级的宽度设置为50%，则子级的宽度将转换为50px。对于媒体查询上的(min|max)-(width|height)，没有父对象可以与之进行比较，但是如果他们伪造了一个，则很可能是视口，例如vw，vh和百分比html使用。但是，浏览器实际上完全忽略了(min|max)-(width|height)上的百分比，如下所示：

@media (min-width: 1%) {
  * { background: yellow }
}
@media (max-width: 100%) {
  * { background: red }
}

<code style="display: block">
  @media (min-width: 1%) { div { background: yellow } }<br>
  @media (max-width: 100%) { div { background: red } }
</code>

您还可以使用resolution-related units来进行媒体查询（使用resolution），但是它们仅限于每长度的点数，例如dpi代表每英寸的点数，而不是屏幕上的总点数。

与屏幕尺寸有关的媒体查询对于大多数用例来说并没有什么帮助，但是，(min|max)-(width|height)的最大用例是不同屏幕尺寸，例如电话，平板电脑，笔记本电脑和大型台式机显示器。在max-width: 50%屏幕上有一个1920x1080断点将意味着该断点将在960px附近。在iPhone XS上，相同的断点在207px附近（CSS像素，而不是设备像素）。大多数人不会在分割屏幕上使用浏览器，而且大多数（全部？）电话都不支持窗口模式或双分割屏幕，因此您绝不会在高度和宽度均按百分比设置的情况下遇到断点。并且，除非您使用的百分比和项目总是可以包装，否则您将不得不在每个媒体查询中指定其他信息才有用（例如，(max-width: 50%) and (min-width: 50px)）。

此可能对您有帮助的是，一个应用程序在单个应用程序中使用了多个窗口。与所有工具栏都在一个窗口中相反，请以窗口模式考虑Photoshop或GIMP。但是即使那样，使用现有的媒体查询仍然可能实现任何效果。

因此，您的问题的答案是我们使用非百分比长度，因为永远不会触发视口断点（视口始终为100％）并且分辨率断点（例如屏幕尺寸的百分比）不存在。一组不可用的分辨率断点媒体查询（device-width和device-height）已被弃用，并且不得在新代码中使用。

相反，当页面的可见部分大小不同时，我们使用长度断点来更改设计，而不管设备的大小。

由于大多数开发人员基于像素进行设计，因此许多库使用绝对长度（例如px）而不是相对单位（例如em）。随着时间的流逝，人们已经朝着相对单位转移了，但是没有一个临界点。

尽管960px相当普遍，但此台式机/平板电脑的断点已随着时间而改变。在很长一段时间内，网站被设计为适合1024x768监视器。考虑到滚动条和浏览器镶边（窗口周围的边框），网站通常设计为1000px宽，后来980px变得很常见，原因是我不记得了，但我不会如果某些操作系统或浏览器出现了铬和滚动条宽度加起来超过24px的操作系统或浏览器，或者在使用它时与流行的框架有关，则感到惊讶。无论如何，当移动设备变得越来越流行时，设计可在网格中工作的站点也可以了，这就是960px is so common nowadays的原因。

Answer 2

不同显示比例的断点值根据特定像素的不同而有所不同，具体取决于实际使用的基础，例如：

显示比例小-（最小宽度：576px）和（最大宽度：575px），

中等屏幕比例-（最小宽度：768像素）和（最大宽度：767像素），

大尺寸显示尺寸-（最小宽度：591px）和（最大宽度：992px），

以及其他大型显示尺寸-（最小宽度：1200像素）和（最大宽度：1199像素），

为什么网站的最大宽度为960像素，而不只是将其设置为宽度的百分比？

2 个答案: