是否有纯 JavaScript 方法来检索任何站点的媒体查询的所有断点？

Question

我是 JS 新手，想以编程方式找到应用于当前网页的所有基于屏幕宽度的断点（至少所有媒体查询，包括最小值或最大值）。我是否需要将样式表解析为纯文本并以这种方式查找断点？或者有其他方法吗？

我查看了可能有助于找到这些的手动方法和半自动化工具，但我想以编程方式执行纯 JavaScript 代码来查找当前加载的网页的所有基于屏幕宽度的断点（至少是媒体查询）。

@media (min-width: 1281px) {
  //CSS
}
@media (min-width: 1025px) and (max-width: 1280px) {
   //CSS
}
@media (min-width: 768px) and (max-width: 1024px) {
  //CSS
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  //CSS
}
@media (min-width: 481px) and (max-width: 767px) {
  //CSS 
}
@media (min-width: 320px) and (max-width: 480px) {
  //CSS
}
//e.g. credited https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488

我希望输出所有屏幕宽度断点 ['320','480','481','767','768','1024','1025','1280','1281'] . 感谢您的建议。

Answer 1

访问the stylesheets through the API provided。遍历它们并从中获取规则。循环遍历那些并过滤掉那些不是媒体规则的。然后你就可以从每一个中读取conditionText。

您需要解析条件文本以找到断点。

Array.from(document.styleSheets).forEach(sheet => {
  Array.from(sheet.cssRules).forEach(rule => {
    if (rule.type === CSSRule.MEDIA_RULE) {
      console.log(rule.conditionText);
    }
  });
});

@media (min-width: 1281px) {
  body {
    background: blue;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {
  body {
    background: red;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background: green;
  }
}