我一直在四处寻找,但仍然没有找到任何答案。我的问题是:
如何在媒体查询中输出动态 CSS?在我看来,wordpress redux-framework 的 CSS 输出是全局编写的(编译器/内联样式)并将影响所有屏幕尺寸。
在 redux-framework 中以媒体查询方式输出动态 CSS 的更简单方法是什么?
最佳答案
尚未对此进行测试,但应该会给您一个粗略的开端。 您可以使用多个字段(例如 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');
您当然需要确保正确转义,但这应该可以满足您的需求。
关于php - Wordpress Redux 框架媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46236906/