PHP/CSS 如果页面在手机上加载，只显示JPG背景答案

【问题标题】：PHP/CSS If page is loaded on mobile, only display JPG backgroundPHP/CSS 如果页面在手机上加载，只显示JPG背景
【发布时间】：2016-02-07 21:23:30
【问题描述】：

所以对于我的网站，我使用 PHP 调用随机 gif 作为背景。在移动设备上，这可能会占用大量资源。我怎样才能做到这一点，当一个人在移动设备上加载网站时，它只显示“static01.jpg”。

调用后台的PHP代码：

<?php $bg = array(
    'page01.gif', 
    'page02.gif', 
    'page03.gif', 
    'page04.gif', 
    'page05.gif', 
    'page06.gif', 
    'page07.gif', 
    'page08.gif', 
    'page09.gif', 
    'page10.gif', 
    'page11.gif', 
    'page12.gif', 
    'page13.gif', 
    'page15.gif', 
    'page16.gif', 
    'page17.gif', 
    'page18.gif' 
); 
$i = rand(0, count($bg)-1); 
$selectedBg = "$bg[$i]"; 
?>

CSS背景代码：

    background-image:
    linear-gradient(to top,rgba(64,58,89,0.478),rgba(64,58,89,0.478)),
    url(<?php echo $selectedBg; ?>);

【问题讨论】：

标签： javascript php html css mobile

【解决方案1】：

您可以覆盖 CSS 规则：

@media screen and (max-width: 680px) {
    background-image:
        linear-gradient(to top,rgba(64,58,89,0.478),rgba(64,58,89,0.478)),
        url('static01.jpg');
}

【讨论】：

【解决方案2】：

如今，几乎所有宽度低于 767 像素的设备都被视为移动设备。您可以使用 CSS 媒体查询

  .your-bg-container { background-image:
    linear-gradient(to top,rgba(64,58,89,0.478),rgba(64,58,89,0.478)),
    url('selectedBG.gif');
    }
    @media (max-width: 767px) {
       .your-bg-container{
        background: url("/static01.jpg");
      }

    }

【讨论】：

【解决方案3】：

将背景代码放在一个类下，并使用媒体查询根据屏幕大小更改背景图像。

.random_background {
  background-image:
  linear-gradient(to top,rgba(64,58,89,0.478),rgba(64,58,89,0.478)),
  url(<?php echo $selectedBg; ?>);
}

@media only screen and (max-device-width: 767px) {
  .random_background {
    background-image: url('static01');
  }
}

【讨论】：

【解决方案4】：

使用媒体查询和移动优先方法是最好的方法。

因此，我们首先应用一个适用于移动设备及更高版本的背景图像，直到我们决定在更大的断点处覆盖它。

.main-bg {
   background-image:
    linear-gradient(to top,rgba(64,58,89,0.478),rgba(64,58,89,0.478)),
    url(static01.jpg);
}

现在我们决定在 768px 及以上应用数组中的图像：

@media(min-width:768px){
.main-bg {
   background-image:
    linear-gradient(to top,rgba(64,58,89,0.478),rgba(64,58,89,0.478)),
    url(<?php echo $selectedBg; ?>);
  }
}

在我们的 html 中，我们将 .main-bg 添加到正文或您要定位的任何 div 或元素。

<body class="main-bg">

所以现在，任何小于

【讨论】：