我在我的页面上使用媒体查询,如果屏幕很小,我会通过切换 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。如果他们使用大屏幕,有没有办法让图片永远不会下载?
最佳答案
您可以创建一个 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>
关于html - 在媒体查询中下载 Assets ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25806117/