Bootstrap 4 上的自适应布局：超小型移动设备支持的最低屏幕分辨率是多少？答案

【问题标题】：Adaptive layout on Bootstrap 4: what is the minimum supported screen resolution of an extra small mobile device?Bootstrap 4 上的自适应布局：超小型移动设备支持的最低屏幕分辨率是多少？
【发布时间】：2019-06-16 20:07:40
【问题描述】：

Bootstrap 4 文档说：

超小型设备（纵向手机，小于 576 像素）

很明显，超小是屏幕宽度小于 576 像素的设备。嗯，小于 576 像素...少了多少？网格不能减少到零。使用 Bootstrap 网格的布局可以在没有明显设计扭曲的情况下被压缩。此外，有些设备的屏幕宽度远小于 576 像素（320 或 240 像素）。

如果我们在数学上将超小设备支持的屏幕宽度表示为一个区间，我们会得到[a, b)，根据文档，其中b = 576.. 那么...什么是@ 987654324@等于？文档没有涵盖这个问题。

下面的代码示例中有一个自适应标题（具有行和 12 列的容器流体）。在 Chrome 中的开发人员工具中，我找到了值 a = 360，它是网格尚未扭曲的最后一个值（使用a = 359，第 12 列不适合宽度并转到“新行”）。

当然，我可以重置填充，然后一切都适合 320 和 240 像素，但这个解决方案不是开箱即用的：

.row > div {
    padding: 0;
}

360 像素真的是 Bootstrap 4 支持的最小屏幕宽度吗？

快速查看示例：

.header {
  background: rgb(240,240,240);
  min-height: 70px;
  border-bottom: 1px solid gray;
  align-items: center;
  text-align: center;
}

.logo {
  border: 1px dashed black;
  height: 40px;
  width: 100px;
  display: inline-block;
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row header">
    <div class="col-1">
      <i class="fas fa-bars"></i>
    </div>
    <div class="col-9 text-center">
      <div class="logo">Logo</div>
    </div>
    <div class="col-1">
      <i class="fas fa-shopping-cart"></i>
    </div>
    <div class="col-1">
      <i class="fas fa-search"></i>
    </div>
  </div>
</div>

简单复制到文本编辑器的相同代码（也许有人想查看开发工具）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <style type="text/css">
        .header {
            min-height: 70px;
            border-bottom: 1px solid gray;
            align-items: center;
            text-align: center;
        }

        .logo {
            border: 1px dashed black;
            height: 40px;
            width: 100px;
            display: inline-block;
        }
    </style>

</head>
<body>
    <div class="container-fluid">
        <div class="row header">
            <div class="col-1">
                <i class="fas fa-bars"></i>
            </div>
            <div class="col-9 text-center">
                <div class="logo">Logo</div>
            </div>
            <div class="col-1">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="col-1">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

对于小于 576px 的所有内容都将应用样式。并不意味着该样式看起来不错，例如屏幕宽度为 1px ..
@Laurens，没关系。但有些分辨率低于默认的超小 576 像素（如 320 和 240 像素）。看起来 Bootstrap 团队没有考虑屏幕宽度，因为网格扭曲了 359 像素。我说的对吗？

标签： html css twitter-bootstrap adaptive-design adaptive-layout

【解决方案1】：

你是对的，bootstrap 支持的最低分辨率是 240 x 320 像素。 bootstrap 的开发者已经根据当前市场定义了最小宽度。现在出现的大多数功能条手机的分辨率都是 240x320 。但是，如果您想将代码运行到一些老式酒吧，例如分辨率为 128 x 160 的 Samsung Guru，您可以相应地自定义定义媒体查询。

【讨论】：

如果引导程序支持的最小分辨率是 240x320 像素，那么为什么我的示例中的标题会以等于 359 像素的宽度分解？