javascript - 如何通过 JavaScript 获取媒体查询定义的当前 CSS 值？

Question

我对这个问题的标题几乎与现有问题完全相同，但不幸的是，下面的答案不适用:

How to get current css value defined by media query in javascript?

首先，我试图在使用该特定类创建任何元素之前确定特定 CSS 类值是什么。

其次，我想获取样式表中所述的百分比值，而不是像使用 getComputedStyle 那样重新计算为像素值。

第三种复杂情况(是的，好像我需要更多!)是类是在特定 Angular 组件的样式表中定义的，而不是在全局样式表中。我在 document.styleSheets 下找不到任何特定于 Angular 组件的类。

最重要的是，即使我改为将类移动到全局样式表，并查看所有 CSSStyleRules 列出的所有 CSSStyleSheet document.styleSheets，虽然我可以找到该特定类的规则，但不幸的是，这些规则并未反射(reflect)媒体查询动态做出的任何更改。

这是涉及的特定 CSS:

.my-class {
  display: flex;
  line-height: 1;
  min-width: 0;
  padding-bottom: 1em;
  padding-right: 1em;
}

@media all and (min-width: 0) {
  .my-class {
    width: 94%;
  }
}

@media all and (min-width: 768px) {
  .my-class {
    width: 47%;
  }
}

@media all and (min-width: 1024px) {
  .my-class {
    width: 31.5%;
  }
}

@media all and (min-width: 1366px) {
  .my-class {
    width: 23.5%;
  }
}

@media all and (min-width: 1700px) {
  .my-class {
    width: 19%;
  }
}

当我从浏览器窗口接收到 resize 事件时，我想要知道 CSS 和媒体查询。这样我就可以知道有多少使用我的类的元素可以水平显示，然后在计算中使用该值来计算应该从服务器获取虚拟分页元素列表的多少元素。

有一种解决方案我很确定我可以使用，但它并不理想:window.matchMedia

通过 JavaScript 监控媒体查询的问题在于，JavaScript 代码必须手动与 CSS 中的任何更改同步，并为 CSS 中的每个断点使用单独的 matchMedia。

Answer 1

我想到了两个选项

1(如您所述)

// reverse because you are looking for min width, If the min width is 1300 you know that all the values after it will be false (in the reversed arr)
const breakPointSizes = [0, 768, 1024, 1366, 1700].reverse()
const widths = [94, 47, 31, 23, 19].reverse() // You will have to match manually with what you have in css

const mediaMatches = breakPointSizes.map(size =>
  window.matchMedia(`(min-width: ${size}px)`)
)

window.addEventListener("resize", () => {
  const indexOf = mediaMatches.findIndex(mediaMatch => mediaMatch.matches)
  const width = widths[indexOf]
  console.log(width)
})

如果你想要一个动态的方式那么我建议做的是在dom中的某个地方隐藏那个类的唯一元素，然后根据当前值计算百分比

window.addEventListener('resize', () => {
  const contatinerWidth = document.getElementById('container').getBoundingClientRect().width;
  const elmWidth = document.getElementById('elm').getBoundingClientRect().width;
  const percentage = elmWidth / contatinerWidth;
  // At this point you know whats the percentage that should be given by your css class
  console.log(percentage)
})

#container {
 position: fixed;
 top: -300px; 
 /* So no one can see it **/
 width: 100vw;
}

.test {
 width: 50%;
}

  

@media only screen and (max-width: 600px) {
    .test {
        width: 70%;
    }
}

<div id="container">
 <div id="elm" class="test">
<div>