基于媒体查询应用CSS类

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

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

来源

2016-03-08 Francisco Goldenstein

问题寻求帮助的代码必须包括必要的重现它最短的代码* *在问题本身**。请参阅[**如何创建最小，完整和可验证的示例**]（http://stackoverflow.com/help/mcve） –

我认为您误解了这些应用和使用方式。你可以在同一个元素上使用col-md-x和col-sm-x等。如果你想隐藏某个特定的媒体查询，你可以使用像hidden-xs，hidden-md，hidden-sm等工具。 –

我知道我可以同时应用，而且我在很多地方都可以使用它，但是这种情况是不同的。在移动设备中，我想应用col-xs-2，但在桌面版本中，我需要使其像桌子一样工作，所以我使用display：table。 –

在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，只是添加custon类这样

<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里面的内容..

来源

2016-03-08 21:14:01 BinaryGhost

这是我所需要的，关键是覆盖宽度属性。在我的情况下，我把它设置为''采取默认值。 –

很高兴帮助:) – BinaryGhost

-1

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

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

来源

2016-03-08 20:24:34 GMchris

谢谢，但我想知道是否有更好的方法来处理它。我正在考虑一个根据媒体元素设置的课程。 –

我不太确定Bootstrap的具体情况，但最好的办法可能就是编写媒体查询，它只是简单地设置样式。也许更好的办法是修改Bootstrap媒体查询。 – GMchris

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

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

来源

2016-03-08 20:35:26 magreenberg

谢谢，我了解了matchmedia。 –

基于媒体查询应用CSS类

回答

相关问题