根据媒体查询应用CSS类

Question

我正在使用Bootstrap 3。基于媒体查询应用不同的CSS类，哪种方法最好？当使用移动设备时，我需要应用Bootstrap col-xs类，但只有在桌面版本（md、lg）时才应用自定义CSS类。目前我有两个div，一个根据媒体查询可见，但我不想因此重复DIV。

我知道可以将col-md和col-lg应用于DIV，并且我在许多地方都这样做了，但是这种情况不同。在移动设备中，我想应用col-xs-2，但在桌面版本中，我需要使它像表格一样显示，所以我使用display：table。

- Francisco Goldenstein

---

寻求代码帮助的问题必须在问题本身中包含最短的可重现代码。请参阅如何创建一个最小、完整和可验证的示例。 - Paulie_D

我认为您误解了这些是如何应用和使用的。您可以在同一元素上使用col-md-x和col-sm-x等。如果您想在特定的媒体查询中隐藏其中之一，则可以使用hidden-xs、hidden-md、hidden-sm等实用程序。 - Rodrigo C

我知道我可以同时应用两种方法，并且在许多地方都这样做了，但是这种情况不同。在移动设备上，我想应用col-xs-2，但在桌面版本中，我需要使其表现得像一个表格，因此我使用display:table。 - Francisco Goldenstein

Answer 1

使用matchmedia的JavaScript if语句。同时，更好的选择是使用Mondernizer库来更好地处理此功能。

if (window.matchMedia('your_query').matches){
 //add class
}

- mattdevio

---

谢谢，我了解了matchmedia。 - Francisco Goldenstein

Answer 2

在div上使用col-xs-2，并添加自定义媒体查询以在屏幕适合col-lg-*大小时进行操作。

例如，您有以下设置：

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-2 custom-lg-col">
           .....
       </div>
       .....
   </div>
</div>

那么您可以将以下内容添加到您的样式文件中：

@media (min-width: 1200px) {
  .custom-lg-col {
    width:...;
    display:table;
    ......
  }
}

但是你也可以保留col-lg-2，只需添加一个自定义类，像这样

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-2 col-lg-2 only-desk-class">
           .....
       </div>
       .....
   </div>
</div>

样式：

@media (min-width: 1200px) {
  .only-desk-class {
    width:...;
    display:table;
    ......
  }
}

如果您不想更改col-lg-*的默认样式，只需将自定义div应用于其内部内容即可。

- BinaryGhost

---

这就是我所需要的，关键在于覆盖宽度属性。在我的情况下，我将其设置为“”以使用默认值。 - Francisco Goldenstein

Answer 3

你不能通过CSS使用媒体查询添加不同的类，但是你可以使用JavaScript监听窗口的resize事件，并在达到特定宽度或高度阈值时向各种元素添加类。

window.addEventListener('resize', function() {
    if (window.innerWidth < 1400) {
        // Add classes to elements.
    }
}, false);

- GMchris

---

谢谢，但我想知道是否有更好的方法来处理它。我在考虑根据媒体元素设置的类。 - Francisco Goldenstein

我对Bootstrap并不是很确定，但你最好的选择可能就是编写媒体查询，简单地设置样式。甚至更好的方法可能是修改Bootstrap的媒体查询。 - GMchris