根据媒体查询应用 CSS class

Question

我正在使用 Bootstrap 3. 根据媒体查询应用不同 CSS classes 的最佳方法是什么？当它是移动设备时，我需要应用 Bootstrap col-xs classes，但当它是桌面版本（md、lg）时，我只应用自定义 CSS class。现在我有 2 个 div，其中一个根据媒体查询可见，但我不想因此而重复 DIV。

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

Answer 1

您无法使用媒体查询通过 CSS 添加不同的类，但是您可以使用 JavaScript 在 window 上监听 resize 事件]，当达到一定的宽度或高度阈值时，将类添加到各种元素。

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

Answer 2

使用 matchmedia javascript if 语句。使用 Monderizer 库也是一个更好的主意，它将更好地处理此功能。

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

Answer 3

在 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 并像这样添加一个自定义 class

<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 应用于里面的内容即可..

根据媒体查询应用 CSS class

Apply CSS class based on media query

css

media-queries

twitter-bootstrap