javascript - WordPress 主题定制器 : Live Preview CSS by Media Query

Question

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

nav { background-color: #fff; }

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

我为实时预览设置了所有 JavaScript，如下所示，但这会绑定(bind)到所有显示尺寸。我无法弄清楚如何将其绑定(bind)到媒体查询。

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

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

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

@media only screen and (max-width: 767px) <-- 此处缺少括号和冒号。

Further Info here.