Question

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

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

delete()

有可能吗？

Answer 1

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

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

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);
  }

媒体查询的引导网格

2 个答案: