使用PHP和Javascript创建响应性背景图像

我正在建立一个网站，我有一个与背景图像的div。目前，我有3种尺寸的背景图像，一种用于全屏，一种用于小屏幕，另一种用于手机。我知道我可以使用@media screen进行css背景和缩放，但这需要我为每个图像创建一个新的css规则。

为了解决我的问题，我想我可以使用PHP，但我突然意识到，由于PHP是服务器端的，页面不会响应，只能在页面加载上选择正确的图像。我当前的PHP代码大致如下：
编辑：这段代码没有用，因为我忽略了window.screen.width是javascript而不是PHP这一事实

<div style="background-image: url(    
<?php 
var screenWidth = window.screen.width;

if (screenWidth >= 1280)
{
    echo $imageregular
}
elseif (screenWidth >= 630 && screenWidth < 1280)
{
    echo $imagesmall
}
else 
{
    echo $imagemobile
}
;?>
);">
</div>

---

没有类似的东西

window.screen.width

在PHP中。您无法在服务器端获取屏幕尺寸。您必须使用JavaScript来处理它

或者，您可以检查JS中的维度，然后使用一些特殊参数将用户重定向到站点

index.php?size=medium

但这是一个丑陋的解决方案：）最好的方法是使用媒体查询…
类似的方法应该可以：

PHP:

$imageregular = '1.jpg';
$imagesmall   = '2.jpg';
$imagemobile  = '3.jpg';

<div class="bg">

</div> 

.bg{
   background-image:url(<?php echo $imageregular; ?>);
}
//This should be inside the php page itself so that the variable is not empty

HTML:

$imageregular = '1.jpg';
$imagesmall   = '2.jpg';
$imagemobile  = '3.jpg';

<div class="bg">

</div> 

.bg{
   background-image:url(<?php echo $imageregular; ?>);
}
//This should be inside the php page itself so that the variable is not empty

我将为此使用窗口宽度：

$(document).ready(function(){
    resizeBg();         
});

//Getting resize event
$(window).resize(function() {
    resizeBg();     
});


function resizeBg(){
       var width = $(window).width();
        if(width<420){
             $(".bg").css("background-image", "url(<?php echo $imagemobile;?>)");
        }else if(width>420 && width<780){
             $(".bg").css("background-image", "url(<?php echo $imagesmall;?>)");
        }else{
             // do nothing as main image is already loaded via css
        }
}

$（文档）.ready（函数（）{
resizeBg（）；
});
//获取调整大小事件
$（窗口）。调整大小（函数（）{
resizeBg（）；
});
函数resizeBg（）{
变量宽度=$（窗口）.width（）；
如果（你只是让你的生活变得困难……）…只需在CSS3中查看媒体查询，您就可以节省世界上所有的时间。为了让您满意：&。您只需要编写3组规则…我查看了它，是否遗漏了什么？我仍然认为CSS媒体规则需要在CSS文件中指定背景图像，这意味着我必须创建一个新ID，元素和CSS类，这是我希望用PHP避免的。不，每个图像不需要有不同的id。对于相同的id，可以根据屏幕大小有不同的背景图像，这非常简单。请参阅：我知道我可以根据媒体规则的不同屏幕大小有不同的背景图像，但是我正在寻找完全不同的图像集，例如，每个图像有3个大小，我可以在HTML中设置每个图像，而不必重复自己。如果我使用媒体规则，我需要为每个不同的图像集创建一个新规则，我希望避免这种情况。请参阅我的答案，希望它有意义。感谢window.screen.wi上的捕获dth，我愚蠢地忽略了一个事实，那就是它是一个javascript变量而不是PHP。无论如何，我想我需要的是一个javascript代码，允许它的图像成为PHP变量，我可以在我的PHP include中设置，尽管我不太确定PHP到javascript的通信是如何完成的。至于后一种解决方案，那只会造成混乱因为我使用的是图像集，所以如果是这样的话，我只会使用媒体规则，但希望我可以避免.JS通过AJAX与PHP通信。类似的东西可以工作。PHP文件会根据您给他的大小向您发送图像scr。工作正常，非常感谢！我唯一需要修改的是其他内容，因为我为l输入了一个值最大的图像，以及使其普遍定制。