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

Question

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

有没有办法在媒体查询中指定将被查询忽略但可检索的数据？

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

Answer 1

我不知道如何仅通过查看媒体查询“行”来做到这一点，而不会打扰某些验证器，因为，afaik，例如，您不能随意使用 css 变量。

但您可以在媒体查询的设置中使用 CSS 变量。这似乎有点hacky，但它有效。这个 sn-p 在媒体查询的设置中查找“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;
  }
}

Answer 2

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

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

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

如果您需要一组用于媒体查询的开发人员标识符，那么媒体查询的 sintax 中是否指定了 ident 字段：developer.mozilla.org/en-US/docs/Web/CSS/ident