基于媒体查询应用 CSS 类 [关闭]

Posted 2023-03-06

【中文标题】基于媒体查询应用 CSS 类 [关闭]

【英文标题】：Apply CSS class based on media query [closed]

【发布时间】：2016-06-22 23:32:22

【问题描述】：

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

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

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

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

我知道我可以同时申请这两种方法，而且我在很多地方都在这样做，但这种情况不同。在移动设备中，我想应用 col-xs-2，但在桌面版本中，我需要让它表现得像一张桌子，所以我使用 display:table。

【参考方案1】：

在 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 应用到里面的内容..

【讨论】：

这就是我所需要的，关键是要覆盖 width 属性。就我而言，我将其设置为 '' 以采用默认值。

【参考方案2】：

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

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

【讨论】：

谢谢，我了解了matchmedia。

【参考方案3】：

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

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

【讨论】：

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

我不太确定 Bootstrap，但是你最好的选择可能只是编写媒体查询，它只是设置样式。也许更好的是修改 Bootstrap 媒体查询。