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

Question

Bulma和我认为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变得很普遍，但是如果某些操作可以使我不感到惊讶系统或浏览器出现了chrome和滚动条宽度加起来超过24px的情况，或者它可能与使用它时的流行框架有关。无论如何，当移动设备变得越来越流行时，设计可在网格中工作的站点也可以了，这就是960px is so common nowadays的原因。