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

Question

我正在建立一个网站，其中有一个带有背景图片的 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>

（请原谅我的 PHP 中的任何错误，我还在学习，我还没有测试过）使用 php 包含，然后我会在我想要这样的图像时将这个 PHP 文件包含在我的父 HTML 中，例如

<?php
$imageregular = '1.jpg';
$imagesmall = '2.jpg';
$imagemobile = '3.jpg';
include 'menuitem.php';
?>

那么，我该如何重做，以便使用 Javascript 来检测屏幕宽度并设置图像，同时保持使用 PHP 变量的灵活性？

编辑

好吧，由于 PHP 无法发现浏览器宽度，我假设我可以使用这样的东西：

$( window ).resize(function() {
  if ( $(window).width > 1280)
   {
      //somehow get a php variable and include it in here and do a .css('background-image','url(<?php echo $imageregular ?>');
   }
});

等等

如何在 Javascript/Jquery 中使用 PHP 变量？

Answer 1

应该这样做：

PHP：

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

HTML：

<div class="bg">

</div> 

CSS：

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

JS：

您可以使用以下内容来获取可以更改编码的维度：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

我将为此使用窗口宽度：

$(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
        }
}

注意：这未经测试，您需要根据需要使用正确的尺寸。只是让您了解如何做到这一点。这也需要包含 jquery 库。

Answer 2

没有类似的

window.screen.width

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

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

index.php?size=medium

但这是一个丑陋的解决方案 :) 最好的方法是使用媒体查询...