4

我没有使用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。

有没有人这样做过？

4

3 回答 3

10

在你的 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>

在此处阅读更多信息： 移动设备技巧

于 2013-06-19T07:58:59.063 回答
1

许多年后，大量的测试以及培训和一般经验。

我发现有不同的解决方案最适合这样的情况：

  1. 使用可以在 WordPress 中轻松完成的 PHP 图像库优化您的图像，这将使图像对网络友好并在所有设备上加载更快。
  2. 使用 PHP 检测 Apache 请求的屏幕大小并使用钩子加载模板文件。就像 AMP 插件为移动设备加载不同的主题一样。
  3. 使用 PHP 检测屏幕尺寸并根据尺寸优化/生成图像。

我在我的 WordPress 旁边使用PHP 图像库来生成和加载我想要的大小和质量的图像，并允许我即时更改大小。

对于屏幕/用户代理检测，我使用Mobile-Detect。

您还可以结合使用这两种解决方案以获得最佳效果。

于 2018-07-27T10:27:45.957 回答
1

你在 2013 年领先于你的时代，幸运的是，在 2022 年，事情开始迎头赶上：P

最佳答案只讲述了一半的故事（display:none与媒体查询一起使用），因为即使图像未显示，它仍会被加载（导致性能下降）。

如果图像不在页面顶部（对于桌面），那么您很幸运，可以为图像添加延迟加载。

如果您使用图像作为背景，我建议您考虑使用 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 年提出了什么解决方案。

于 2022-02-03T13:08:08.557 回答