我没有使用 jquery mobile。
我在 WordPress 中构建了一个模板，并有一个全宽背景，可以为每个页面设置不同的背景：Background_1.jpg = Home, Background_1.jpg = About, ens....
这是前端加载的内容：
<div id="bg">
<img id="background" src="images/Background_1.jpg" alt="background">
</div>
所以我的问题如下：
当我进入流体网格布局时，我想完全删除这个元素以加快加载时间。
我也不想隐藏它，我想在窗口大小小于 600px 时删除 html。
以前有人做过吗？
【问题讨论】：
标签： jquery mobile fluid-layout
在您的 CSS 中使用媒体查询。 像这样的：
@media (max-width: 767px) {
.styleName {
display:none;
}
}
如果窗口大小小于 767px，这将隐藏 css 元素。您确实需要在 html 中使用正确的标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
要在移动视图上隐藏 div，您需要合适的窗口大小。这与引导框架差不多：
/* Landscape phones and down */
@media (max-width: 480px) { ... }
要在您的代码中实现这一点，您可以使用：
<div id="bg" class="styleName">
CODE
</div>
在此处阅读更多信息： Mobile Device Trick
【讨论】：
多年后，经过大量测试、培训和一般经验。
我发现有不同的解决方案最适合这样的情况：
我在我的 WordPress 旁边使用PHP Image Library 来生成和加载我想要的大小和质量的图像，并允许我即时更改大小。
对于屏幕/用户代理检测，我使用Mobile-Detect。
您还可以结合使用这两种解决方案以获得最佳效果。
【讨论】：
你在 2013 年领先于你的时代，幸运的是，在 2022 年，事情开始迎头赶上：P
最佳答案只说明了一半（将display:none 与媒体查询一起使用），因为即使图像未显示，它仍会被加载（导致性能下降）。
如果图片不在页面顶部（桌面版），那么您很幸运，只需添加 lazy loading for the image。
如果您使用图片作为背景，我建议您考虑使用 CSS - 特别是 background-image: image-source 加上媒体查询以在移动设备上排除图片。
.bg {
background-image: -webkit-image-set(
url("images/Background_1.jpg") 1x,
url("images/Background_2.jpg") 2x);
background-image: image-set(
url("images/Background_1.jpg") 1x,
url("images/Background_2.jpg") 2x);
}
@media (max-width: 600px) {
.bg {
background-image:none;
}
}
不幸的是，目前很难一直进行优化，因为您可能还希望使用不同的文件格式（例如 webp 或 avif） - 这些都没有得到很好的支持。有一些解决方法，在此答案中进行了描述：https://stackoverflow.com/a/59970037/1912127
我很想知道您在 2013 年提出了什么解决方案。
【讨论】：