Html 隐藏<；部门>；取决于页面大小的元素

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

这是我的滑块（和两个条）的代码。它位于my 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时，ID为“bar”的两个图标消失

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

---

希望你能帮助

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

首先，它只加载前视图。ie你可以看到的内容，当你向下滚动时，其余的内容被加载

---

寻找插件

这应该可以做到，把css放在你身上：

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

---

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

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

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

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

---

希望这能有所帮助（抱歉，我对编码还不太熟悉……），所以我修改了栏的“to:”，并添加了您在my style.css中发布的内容，但它不起作用。。。我做错了什么吗？现在你必须在css中将

#bar

更改为

.bar

。这是因为类选择器是

，id选择器是

#

如果我的答案解决了您的问题，请检查它是否被接受。在我答案的左上角有一个复选框。好的。。。所以现在我在我的CSS中添加了这个：@media screen和（最大宽度：1220px）{.bar{display:none；}}}，我的仍然是一样的。没有什么改变。。。即使我的浏览器页面尽可能小，这些条仍然存在。我做错了什么？

#bar.bar{display:none；}

删除该

#bar

#bar {display:none; }