javascript - 是否有纯 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;
  }
}