1

我正在制作一个网站（使用 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

希望你能帮上忙……！

4

3 回答 3

1

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

起初它只加载前视图。即，您首先可以看到的内容，当您向下滚动时，将加载其余内容。

在此处查找插件。

于 2013-08-22T03:52:45.950 回答
1

这应该可以解决问题，穿上你的CSS：

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

还有一件事，永远不要对不同的元素使用相同的 ID，而是使用类。

于 2013-08-22T03:56:31.260 回答
0

您不需要为此使用 Javascript。看看这篇文章，因为它包含您需要的所有信息。基本上，您将根据浏览器的大小应用不同的 CSS。

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

上面的例子只有在浏览器宽度小于 1220 时才会加载。在这个 css 中，你可以有一个规则让 div 消失，如下所示：

#bar {display:none; }

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

希望这可以帮助

于 2013-08-22T03:57:27.603 回答