javascript - PHP/CSS 如果页面在手机上加载，则仅显示 JPG 背景

Question

因此，对于我的网站，我使用 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; ?>);

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