根据Media Query有条件地显示内容

conditionally display content based on Media Query

本文关键字：显示 有条件 Media Query 根据      更新时间：2023-09-26

我有一个网站，在桌面版本的侧边栏显示包含10到20个小图像。到目前为止，在移动设备上，这个侧边栏只是用display: none隐藏，这是性能最低的解决方案，因为所有的图像无论如何都会被加载。

我现在想知道在移动设备上完全禁用侧边栏的最好方法是什么(不使用单独的AJAX请求)。

我能想到的最好的解决办法是:

    将侧边栏的HTML代码写入JavaScript变量
  • 通过使用JavaScript检查媒体查询来测试设备宽度(例如使用Modernizr.mq或左右)
  • 如果此测试产生非移动设备，则将变量的内容写入DOM，例如使用innerHTML, jQuery.append, jQuery.prepend或类似的

我知道RWD性能有时可能是一个非常复杂的话题，而最有效的解决方案往往不是显而易见的。那么，有没有人能想出比上面提到的更好的解决方案呢?

如果您不希望图像在移动设备上加载，而不是将图像放置为<img>标记，您可以将div设置为所需的宽度和高度，并将图像作为背景图像。在css中，默认情况下隐藏侧边栏。然后，在任何你认为超出移动的宽度，使用媒体查询来显示侧边栏，并在div中加载背景图像。

#sidebar {
    display: none;
}
#sidebar div#sidebar-img-1 {
    width: 100px;
    height: 100px;
}
/* ... */
@media only screen and (min-width: 480px) {
    /* display sidebar */
    #sidebar {
        display: block;
    }
    /* set background image for sidebar items */
    #sidebar div#sidebar-img-1 {
        background-image: url("sidebar1.jpg");
    }
    /* ... */
}

缺点是，通过在样式表中放置内容，您将牺牲性能来换取语义。

我正在做一些关于如何做到这一点的研究，并通过灯丝组遇到了这个:https://github.com/filamentgroup/Ajax-Include-Pattern/

似乎很容易设置。它的工作原理看起来像是在数据属性中设置的媒体查询。

你不想在移动设备上显示的侧边栏应该是这样的:

<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside>

所以你的侧边栏只会出现在至少40ems (~640px)宽的屏幕上。当然，您还需要javascript文件并启动它，但这些看起来也相当简单。

相关文章：