php - Wordpress Redux 框架媒体查询

Question

我一直在四处寻找，但仍然没有找到任何答案。我的问题是:

1. 如何在媒体查询中输出动态 CSS？在我看来，wordpress redux-framework 的 CSS 输出是全局编写的(编译器/内联样式)并将影响所有屏幕尺寸。

2. 在 redux-framework 中以媒体查询方式输出动态 CSS 的更简单方法是什么？

Answer 1

尚未对此进行测试，但应该会给您一个粗略的开端。您可以使用多个字段(例如 480、768、991 等)并仅使用 wp_add_inline_style 输出代码。

function my_custom_css(){

 //get the theme option
 $option = get_option('opt_name');

 // get the fields holding the custom css for each media query
 $media_991_css = $option['css991'];
 $media_768_css = $option['css768'];
 $media_480_css = $option['css480'];

 // store the values in a variable
 $output  = "@media screen and (max-width: 991px){" . $media_991_css . "}";
 $output .= "@media screen and (max-width: 768px){" . $media_768_css . "}";
 $output .= "@media screen and (max-width: 480px){" . $media_480_css . "}";

 // output it with wp_add_inline_style
 if(!empty($output)){
        wp_add_inline_style('style',$output);
    }
}

add_action('wp_enqueue_scripts','my_custom_css');

您当然需要确保正确转义，但这应该可以满足您的需求。