Question

我正在制作一个网站（使用Wordpress），我在滑块旁边插入了两个条形图。问题是：当页面太小时，两个条形图在滑块上方和下方。当浏览器页面小于1220px时，我想让它们消失。

这是我滑块的代码（以及两个条形码）。它位于我的Header.php文件中：

<div style="text-align: center; margin-bottom:20px;">

    <div id="bar" style="height:420px; width:6px; display:inline-block;">
        <img src="http://e404.ca/wp-content/uploads/SliderBar.png">
    </div>

    <div style="margin-left:auto; margin-right:auto; height:420px; width:1200px; display:inline-block;">
        <?php layerslider(1, 'homepage'); ?>
    </div>

    <div id="bar" style="height:420px; width:6px; display:inline-block;">
        <img src="http://e404.ca/wp-content/uploads/SliderBar.png">
    </div>

</div>

基本上，当页面小于1220px时，我希望带有“bar”作为ID的两个消失。

我想要一个没有jQuery的解决方案。我的网站，如果你想看看滑块是：http://e404.ca

希望你能帮忙......！

Answer 1

您可以在 J查询中使用 jScroll 。它实际上是一个延迟加载的插件。

首先它只加载前视图。即，您可以首先看到的内容，当您向下滚动时，其他内容都会被加载。

查看Here插件。

Answer 2

这应该是诀窍，穿上你的css：

@media screen and (max-width: 1220px) {
    #bar{display:none;}
}

另外，永远不要对不同的元素使用相同的ID，而是使用类。

Answer 3

您不需要Javascript。请查看this article，因为它包含您需要的所有信息。基本上，您将根据浏览器的大小应用不同的CSS。

<link rel='stylesheet' media='screen and (max-width: 1220px)' href='css/medium.css' />

仅在浏览器宽度小于1220时才会加载上述内容。在这个CSS中你可以有一个规则让div消失，如：

#bar {display:none; }

我不建议您为所有内容使用一个CSS，因为随着您的网站变得越来越大，管理它将变得非常困难。不同分辨率的多个CSS文件将使您的生活更加轻松。

希望这有帮助

根据页面大小隐藏<div>元素</div>

3 个答案: