引导网格的媒体查询

Question

我不是样式专家，我在小型项目中使用引导程序。 所以，我的问题是网格系统。我有两台显示器，第一台分辨率为 1920x1080，第二台分辨率为 1366x768。 如果分辨率是 1366x768，我想用 mediaquery 说使用 md 的网格系统而不是 lg

例如，我有一个如下所示的 div

<div class="col-lg-9 col-md-6">
....
</div>

div class="col-lg-3 col-md-6">
...
</div>

有可能吗？

Answer 1

在 bootstrap3 中，您可以对等于或大于 1200 像素的设备使用 col-lg 类，对等于或大于 992 像素的设备使用 col-md 类。同样，在 bootstrap 4 中，您可以使用 col-lg 类来获得等于 992 像素或更高的分辨率，而 col-md 类用于 col-md 或更高的分辨率。您可以在其官方网站https://getbootstrap.com/docs/3.3/css/#overview-container 上找到完整的引导网格文档（针对引导程序 3）。

在您的情况下，我正在使用 boostrap 版本 3。如果您想在 1366X768 或更高的分辨率上使用 col-md 类，显然您想在 1920x1080 或更高的分辨率上使用 col-lg 类，正如您所说的那样，您有两台显示器.如果是这样，只需转到 bootstrap 官方网站的自定义部分，即https://getbootstrap.com/docs/3.3/customize/ 然后向下滚动，您将找到媒体查询断点部分。您可以通过从那里自定义您自己的断点，只需将@screen-lg 标记的输入框填充为 1920 像素，@screen-md 标记为 1366 像素。现在您可以转到此页面的底部，然后只需单击编译和下载按钮。 现在您可以使用这个下载的可能适合您的引导文件。同样，您可以通过编辑这些较少的变量来根据需要自定义每一件事。

Answer 2

如果我正确理解了这个问题，您可以使用 JQuery 做到这一点。像这样：

if (window.matchMedia('(min-width: 1025px )').matches) {
    high.css('height', maxheight - 3);
    boxOne.css('height', maxheight);
    boxTwo.css('height', maxheight);
    boxThree.css('height', maxheight + 23);
  }
  else if (window.matchMedia('(min-width: 768px) and (max-width: 1024px)').matches) {
    high.css('height', maxheight - 11);
    boxOne.css('height', maxheight);
    boxTwo.css('height', maxheight);
    boxThree.css('height', maxheight + 23);
  }