Javascript Wordpress主题定制器：通过媒体查询实时预览CSS

我正在使用Worpress'允许用户更改我的网站颜色。我的网站响应迅速，导航会改变移动设备的颜色。我的CSS看起来类似于以下内容：

nav { background-color: #fff; }

@media only screen and max-width 767px {
    nav { background-color: #b00; }
}

我为实时预览设置了所有JavaScript，如下所示，但这将绑定到所有显示大小。我不知道如何将此绑定到媒体查询

wp.customize( 'background_color', function( value ) {
    value.bind( function( newval ) {
        $('nav').css('background-color', newval );
    } );
} );

任何帮助都将不胜感激

---

谢谢

您在CSS中的媒体查询应该是：

---

@仅媒体屏幕和（最大宽度：767px）

基于此的if语句可能会起作用<代码>$（窗口）.width（）<768谢谢，安德鲁。“这很有效。”安德鲁，谢谢！这非常有效。更新到…`if（$（window.width（）<768）{wp.customize（'background_color'，function（value）{value.bind（function（newval）{$（'nav'）.css（'background-color'，newval）；}）；}}`现在我只需要弄清楚，如果我开始变大并调整大小，该如何使它工作。我试图……`$（窗口）.resize（函数（）{if（$（窗口）.width（）<768）MORE…`..但是除非我调整浏览器的大小，否则它不会工作。很乐意帮助…使用

$（窗口）。trigger（'resize'）；

并将其加载到

$（文档）。ready（函数（）{$（窗口）。trigger（'resize'）；}）；

媒体查询工作正常。问题出在JavaScript上。@Andrewaining找到了解决方案。谢谢。