Question

我正在建立一个网站，我有一个背景图像的div。目前，我每张图片有3种尺寸的背景图像，一种用于全屏，一种用于较小的屏幕，一种用于移动。我知道我可以使用@media屏幕进行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 include，每当我想要这样的图像时，我会在我的父HTML中包含这个PHP文件，例如：

<?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

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

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

2 个答案: