Question

我正在开发一个Wordpress主题，允许客户端上传自己的标题背景图片。但我不希望为移动用户加载图像。以下是我现在正在做的事情：

<div class="header" style="
    @media (min-width: 676px) { 
        background-image: linear-gradient(to right, rgba(1, 1, 1, 0.7), rgba(1, 1, 1, 0.1) 35%), 
        url('<?php header_image(); ?>'); 
    }
">

这很有效，但它有很多内联样式。有没有办法避免有这么多的内联CSS？这是我试过的另一种方法，它不起作用：

function header_image_style() {

    $header_image = header_image();

    return "<style type='text/css'>
                .header{
                    background-image: 
                    linear-gradient(to right, rgba(1, 1, 1, 0.7), rgba(1, 1, 1, 0.1) 35%), 
                    url('".$header_image."');
                }
            </style>";
}

此方法仅在调用$header_image时向页面输出header_image_style(); url，并忽略所有其他css。实现我正在做的事情的最佳实践方法是什么？

Answer 1

检查此功能wp_is_mobile检测超过95％的设备。有很好的经验。至于我工作正常

Answer 2

至少你可以通过将媒体查询移动到外部CSS文件来清理内联样式，并使用最大宽度查询来禁用背景图像

@media (max-width: 675px) { 
    .header {
        background-image: none!important; 
    }
}

如何避免动态wordpress风格的内联css？

2 个答案: