div 显示属性的媒体查询

Question

这是随机 div 对象的 css：

.titleHome {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 80px;
    height: 50px;
    z-index: 8;
}

当屏幕宽度达到900px以上时，我希望这个对象的显示是none，我希望它在900px以下可见。我尝试了以下媒体查询，但它不起作用：

(first change css to have display: none;)
@media all and (max-width: 900px) {
    .titleHome { 
        display: normal; 
    }
}

但是我注意到，如果我按上面的方式保留 css，并使用以下内容，它会起作用：

@media all and (max-width: 900px) {
    .titleHome { 
        display: none; 
    }
}

然而，这与我需要的相反。当屏幕宽度小于 900px 时，如何让 div 消失？

Answer 1

将 max-width 更改为 min-width。

@media all and (min-width: 900px) {
    .titleHome { 
        display: none; 
    }
}

Answer 2

Normal 不是有效关键字。你应该为你的情况使用 block。

  @media all and (max-width: 900px) {
    .titleHome { 
        display: block; 
    }
 }

media query with div display property