如何使用媒体查询减少 html 或正文宽度答案

【问题标题】：How to reduce html or body width with media queries如何使用媒体查询减少 html 或正文宽度
【发布时间】：2020-01-22 20:50:58
【问题描述】：

我只是想稍微减小桌面视图的宽度，但无法让它与媒体查询一起使用。我最近的尝试是

@media (min-width: 992px) and (max-width: 1199.98px) {

   html, body {
        max-width: 80%;
   }
}

但它没有影响。我不认为我想弄乱会忽略导航栏的容器 b/c。使用我自己的样式表（在引导 cdn 内容下方添加）而不是直接在 template.html 中使用媒体查询，但我不知道这是否有任何区别。我是在尝试以正确的方式做到这一点，还是我完全错过了什么？

【问题讨论】：

这绝对应该在 992–1199.98px 宽的视口上做一些事情。您是否在其他地方覆盖了最大宽度？
媒体查询有效，可能是其他样式阻止了您的设置。您可以随时尝试max-width: 80% !important;
确实有效果。您确定您的窗口大小在这些范围内吗？
我想你已经为此添加了视口标签(<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">)

【解决方案1】：

在使用布局库时，您不希望到处乱搞高级元素。这限制了您和其他人稍后可以在页面中执行的操作（例如，您想要在某处使用全宽横幅）。您也可能不想随意覆盖 Bootstrap 类的 all 实例。

在这种情况下，请考虑将自定义类添加到 .container 或 .container-fluid 元素，限制其宽度：

.container.narrow {
    max-width: 80%;
}

将它用于您想要更窄宽度的任何容器，并使用容器没有该类以获得更宽的内容。

<div class="container narrow"> ... </div>

您是否在媒体查询中应用它可能并不重要。

【讨论】：