Question

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

用于调用背景的PHP代码：

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

CSS背景代码：

use_iam_profile

Answer 1

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

.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');
  }
}

Answer 2

您可以覆盖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');
}

Answer 3

如今，几乎所有宽度低于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");
      }

    }

Answer 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">

现在，任何小于＆lt; 768px的移动设备都不会加载到阵列中引用的背景图像中。

PHP / CSS如果页面在移动设备上加载，则只显示JPG背景

4 个答案: