Question

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

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

Answer 1

使用matchmedia javascript if语句。使用Monderizer库也可以更好地处理这个功能。

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

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应用于内部的内容..

Answer 3

您无法使用媒体查询通过CSS添加不同的类，但是您可以使用JavaScript在窗口上监听resize事件，并在某个宽度或高度阈值为时为各种元素添加类达到。

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

根据媒体查询应用CSS类

3 个答案: