html - 在媒体查询中下载 Assets

Question

我在我的页面上使用媒体查询，如果屏幕很小，我会通过切换 css 显示属性显示一些不同的 html 代码。

对于我显示的小屏幕:

<div id="slot-machine-mobile" class="row show-for-small-only">
    <div class="small-12 small-centered columns">
        <img src="/assets/img/test-img.jpg">
    </div>
</div>

但据我了解，即使只是使用大屏幕，也会下载此测试 mg。如果他们使用大屏幕，有没有办法让图片永远不会下载？

Answer 1

您可以创建一个 block 元素并通过 css 为其分配一个背景图像。

<div class="img">

img { background-image:url("test-img.jpg"); }

所以您的 HTML 可能看起来像这样:

<div id="slot-machine-mobile" class="row show-for-small-only">
    <div class="small-12 small-centered columns">
        <div class="img"></div>
    </div>
</div>