Wordpress Redux框架媒体查询

Question

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

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

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

Answer 1

Haven没有对此进行测试，但应该给你一个粗略的开始。 您可以使用多个字段（例如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');

你当然需要确保适当的逃避，但这应该可以满足你的需要。