javascript - 使用 jQuery 在特定的@media 查询下异步设置或覆盖 CSS 属性

Question

我知道如何使用这样的 jQuery 函数为每个匹配的元素设置一个或多个 CSS 属性:$( 'p' ).css( 'color', 'red' );但是如何在特定的媒体查询规则下设置 CSS 属性呢？

你能告诉我如何设置 <p> 的颜色属性(比方说)吗？元素 在特定媒体查询下 使用 JavaScript/jQuery 如下所示？

@media (max-width: 600px) {
    p {
        color: red;
    }
}

更新

假设我们有一个颜色选择器控件(例如在 WP Customizer 中) 和一个将在 @media (max-width: 600px) 下异步更改其颜色的 HTML 元素。基于颜色控制。现在如何在特定 @media 下异步设置 CSS 属性基于颜色控件的查询？

Answer 1

你可以使用Window.matchMedia() (不需要 jQuery)

像这样:

if (window.matchMedia("(max-width: 600px)").matches) {
  /* the viewport is less than 600 pixels */
}

片段(演示值已更改)

if (window.matchMedia("(max-width: 800px)").matches) {
  var p = document.getElementsByTagName('P');
  for (var i = 0; i < p.length; i++) {
    p[i].style.color = 'red';
  }
}

p {
  color: blue
}

<p>text</p>