有没有办法在媒体查询条件下存储数据?

Is there any way to store data in a media query condition?

我有一个情况需要排除媒体查询,除非它们匹配一个或多个特定元素。

有什么方法可以在媒体查询中指定将被查询忽略但可检索的数据吗?

var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules!=null ? rules.length : 0;

// loop through rules and hide media queries except selected
for (var i=0;i<numberOfRules;i++) {
  var rule = rules[i];

  if (rule.media!=null) {
      console.log(rule.conditionText);
  }
}
@media (min-width: 500px) {
  .hideOnMobile {
    display: none !important;
  }
}

我想做这样的事情:

@media (min-width: 500px) or (device: myElementName) {
  .hideOnMobile {
    display: none !important;
  }
}

我查看了属性页面,但它看起来没有任何可用的东西。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

媒体查询语法在此 link 中进行了描述: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#formal_syntax

“用一个横线 | 分隔两个或多个实体意味着所有实体都是独占选项:这些选项中的一个必须存在。这通常用于分隔可能的关键字列表。”

您可以使用 window.matchMedia() 函数来确定文档是否与 JavaScript 中的媒体查询字符串匹配,或者您可以直接使用 .media.mediaText[=11= 设置规则]

如果您需要一组用于媒体查询开发人员的标识符,请在媒体查询的语法中指定标识字段:developer.mozilla.org/en-US/docs/Web/CSS/ident

我不知道如何通过查看媒体查询 'line' 来做到这一点,而不会潜在地扰乱某些验证器,因为 afaik,例如,你不能在那里随意使用 css 变量妮莉.

但是您可以在媒体查询的设置中使用 CSS 变量。看起来有点老套,但它确实有效。此代码段在媒体查询的设置中查找 'oneofmine' 字符串,如果它不存在(目前),则告诉您摆脱此规则。 [不知道你会用什么方法去掉这个规则]

var rules = document.styleSheets[0]["cssRules"] || document.styleSheets[0]["rules"];
var numberOfRules = rules != null ? rules.length : 0;

// loop through rules and hide media queries except selected
for (var i = 0; i < numberOfRules; i++) {
  var rule = rules[i];

  if ((rule.media != null) && (rule.cssText.match('oneofmine')) == null) {
    //hide this rule
    console.log('You should hide this rule: ' + rule.cssText);
  }
}
body {
  width: 100vw;
  height: 100vh;
  background: yellow;
}

@media (min-width: 1024px) {
  body {
    --oneofmine: 1;
    background: blue;
  }
}

@media (min-width: 1024px) {
  body {
    background: red !important;
  }
}