css - 是否可以使用带有标签的媒体查询，例如 ？

Question

尝试用jsps和一些css开发一个网页。遇到媒体查询问题。

    @media screen and (min-width:500px) { 
        #first_area {
             display: none; 
        }
    }

这是我在与我的 index.jsp 链接的 css 文件中键入的代码。但是用名为 id='first_area' 的 div 标签包裹的部分即使屏幕小于 500px 也不会改变(第一个区域不会消失)。

我想知道这是否是我的代码的问题/或者媒体查询只应该与已经存在的标签一起使用？ (例如 div、span)我想要做的是使 index.jsp 页面响应。请帮忙。

Answer 1

如果你想在屏幕小于 500px 时隐藏 div，你应该使用 max-width 而不是 min-width。

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