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'); 

你當然需要確保正確轉義，但這應該讓你得到你需要的東西。