传递2张背景图像:1 for Mobile和1个来自PHP的桌面的图像，而无需重复HTML内容

Question

假设我们需要为移动和桌面显示2个不同的图像。我们通常会做这样的事情：

html

<div class="container"></div>

CSS

.container {
    background-image: url('image-for-mobile.jpg');
}
@media (min-width: 1024px) {
    .container {
        background-image: url('image-for-desktop.jpg');
    }
}

但是，当我们从服务器中获取这些图像时会发生什么？假设来自WordPress或任何其他来源？

一种方法是：

html

<div class="container for-mobile" style="background-image: url(<?php echo $img_for_mobile; ?>);"></div>
<div class="container for-desktop" style="background-image: url(<?php echo $img_for_desktop; ?>);"></div>

CSS

.for-mobile {
    display: block;
}
.for-desktop {
    display: none;
}
@media (min-width: 1024px) {
    .for-mobile {
        display: none;
    }
    .for-desktop {
        display: block;
    }
}

出于明显的原因，即使这种"有效"这是不正确的，因为我们正在重复标记。如果我们内部有大量内容'container'怎么办？我们必须重复所有这些，只是具有不同的背景图像。

另一个选项可能是将变量作为数据属性传递，然后jQuery获取这些变量并与屏幕大小分配正确的背景图像。这样的东西：

html

<div class="container" data-mobile="<?php echo $img_for_mobile; ?>" data-desktop="<?php echo $img_for_desktop; ?>"></div>

jQuery

// This is pseudo code, not tested
var imgForMobile = $('.container').data('mobile');
var imgForDesktop = $('.container').data('desktop');
$(window).on('resize', function() {
    if ($(window).width() < 1024) {
        $('.container').css('background-image', 'url(' + imgForMobile + ')');
    }
    else {
        $('.container').css('background-image', 'url(' + imgForDesktop + ')');
    }
});

我们如何以更优雅和正确的方式攻击这种情况？任何想法都将不胜感激。预先感谢！

Answer 1

正确的方式：

这是 srcset的图像是！

https://developer.mozilla.org/en-us/docs/learn/learn/html/multimedia_and_embedding/Responsive_images

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

如果我不得不猜测，我认为您将从中使用它和object-fit一起受益。您是否希望背景图像大小到cover？

如果是这样，这是执行此操作的超级响应和高效方法：

.container {
    position: relative;
}
.container img {
    position: absolute; 
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}    
<div class="container">
    <img srcset="elva-fairy-320w.jpg 320w,
                 elva-fairy-480w.jpg 480w,
                 elva-fairy-800w.jpg 800w"
         sizes="(max-width: 320px) 280px,
                (max-width: 480px) 440px,
                800px"
         src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">        
</div>

较旧的服务器端方式：

如果您真的想像示例一样在PHP中进行此操作，这是我们在WordPress中使用类似的模式。

$image = 'desktop.jpg';
switch (true) {
    case wp_is_mobile() :
        $image = 'mobile.jpg';
        break;
}
<div class="container" style="background-image: url(<?php echo $image; ?>);"></div>

Answer 2

您仍然可以通过完整的URL或CDN来使用CSS方法。

如果false介质查询内部的规则，则该图像不会由浏览器加载。

.container {
    background-image: url('https://www.example.com/image-for-mobile.jpg');
}
@media (min-width: 1024px) {
    .container {
        background-image: url('https://www.example.com/image-for-desktop.jpg');
    }
}

有其他替代方案将此逻辑放置在您的HTML，JS甚至服务器代码中。HTML的答案是使用图像的srcset属性，或者使用html5中引入的<picture>元素。图像上的srcset通常用于处理像素密度的差异，而<picture>元素用于使用媒体查询来提供不同的图像。第一个介质查询与文档匹配的<source>，您可以包括一般的后备，该后备允许向后兼容较旧的浏览器，但是此方法至少加载了2张图像 - 因为后备将始终加载。

>

<picture>
    <source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg 3x" media="(min-width: 40em)" />
    <source srcset="med.jpg 1x, med-2x.jpg 2x, med-3x.jpg 3x" />
    <img src="fallback.jpg" alt="fancy pants" />
    <!-- fallback.jpg is *always* downloaded -->
</picture>

Answer 3

我在网站上做的方式是我使用jQuery检查它是否是移动浏览器（快速Google会找到使用的IF语句，相当长）

）

编辑：这里：if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $('body').addClass('mobile'); }

我用class ='Mobile'附加了身体标签然后在我的CSS中，我有两套：

body {
    background:black;
}
.mobile body {
    background: blue;
}